Fond CSS Dégradé Répétition Numéro

J'ai une page html qui a besoin d'augmenter la largeur et la hauteur, donc je dois pouvoir faire défiler vers le haut et vers le bas et vers la gauche et la droite, mais je n'arrive pas à répéter le dégradé css x et laissez une couleur unie vers le bas.Fond CSS Dégradé Répétition Numéro

Code Dépouillée:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css" media="screen"> 
    html { 
     height: 100%; 
     background-color: #366fcd; } 
    body { 
     margin: 0; 
     height: 100%; 
     width: 100%; 
     background-color: #366fcd; 
     background: -moz-linear-gradient(center top, #316494 0%,#366fcd 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, #366fcd)); 
     background-repeat: repeat-x; 
    } 
    div#TheElement { 
     position: absolute; 
     width: 100px; 
     height: 100px; 
     background-color: #fff; 
     left: 2000px; 
     top: 2000px; 
    }  
</style>  
</head> 
<body> 
    <div id="TheElement">   
    </div> 
</body> 
</html>

Ce court le gradient dans une couleur unie (# 366fcd) lorsque vous faites défiler vers le bas, mais lorsque vous faites défiler à droite, les arrêts de gradient et vous voyez la couleur solide aussi. See example.

Si je supprime le couleur de fond: # 366fcd; } de l'élément html, puis le dégradé se répète le long de l'axe des x comme prévu, mais lorsque vous faites défiler vers le bas, le dégradé s'arrête et le blanc apparaît. See example. Je sais que je pourrais toujours avoir recours à une image d'arrière-plan, mais je préférerais que le CSS fonctionne.

Oh oui, cela a été testé sur Chrome et FF sous OSX Lion.

Anthony

Source

2011-09-15 littlecharva

Tout ce que vous avez besoin est la propriété background-attachment. Avec cette propriété, vous pouvez fixer l'arrière-plan du corps pendant que votre corps remplit complètement la hauteur de l'écran.

background-attachment:fixed; 
height:100%;

Regardez mon exemple ici http://jsfiddle.net/mohsen/TanzY/

Voici votre exemple fixé: http://jsbin.com/ileqid/4

J'ai enlevé background-repeat propriété et également changé les couleurs pour être plus visuel.

Si vous voulez que votre fond défile, vous devez définir the background-attachment à scroll. Scroll ne se produit que si vous avez un contenu élevé, donc dans this exemple, j'ai mis l'étiquette du corps height à 3000px.

Source

2011-09-15 07:51:41 Mohsen

Votre exemple fixe JSBin ne semble pas fonctionner sur le Mac dans Chrome 13. lorsque je défile vers la droite, l'arrière-plan du dégradé disparaît. –

J'ai corrigé cela, c'était parce que l'OP a défini le CSS pour la balise html. – Mohsen

aha! Je pensais que ça pourrait être quelque chose comme ça. Bon travail. –

Appliquez vos dégradés au tag html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <style type="text/css" media="screen"> 
     html, body {    
      width:100%; 
      height:100%; 
      margin:0; 
      padding:0;}   
     html { 
      background:red -moz-linear-gradient(center top, #316494 0%,red 100%) repeat-x; 
      background:red -webkit-gradient(linear, left top, left bottom, color-stop(0, #316494),color-stop(1, red)) repeat-x; 
     } 
     div#TheElement { 
      position: absolute; 
      width: 100px; 
      height: 100px; 
      background-color: #fff; 
      left: 2000px; 
      top: 2000px; 
      border:1px solid #000; 
     }  
    </style>  
    </head> 
    <body> 
     <div id="TheElement">   
     </div> 
    </body> 
</html>

testé dans FF6, Chrome 13 et Safari 5.

Source

2011-09-15 08:26:47 easwee

Fond CSS Dégradé Répétition Numéro

Répondre

Questions connexes