web-dev-qa-db-fra.com

Dégradé HTML/CSS qui s’arrête à une hauteur particulière et continue plus loin avec une couleur unie

Je veux avoir un dégradé en HTML/CSS.

Supposons qu'un DIV ait toujours plus de 400 pixels de haut. Je veux ajouter le dégradé pour qu'il soit #FFFFFF en haut et #EEEEEE à 300px. Ainsi, le premier 300 pixels (hauteur) est un dégradé de Nice allant du blanc au gris. Après 300px, quelle que soit la taille de la DIV, je veux que la couleur de fond reste #EEEEEE.

Je suppose que cela a quelque chose à voir avec les arrêts de dégradé (?)

Comment puis-je le faire?

P.S. Si ce n'est pas possible dans IE, je m'en fiche. Je vais bien si les navigateurs Gecko et Webkit le montrent correctement.

htmlcssgradient
26
user529141
height: 400px;    
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));

Vous pourriez avoir à jouer avec 0,75 car c'est un pourcentage de votre taille, mais cela devrait faire l'affaire.

9
TNC
background-color: #eee;
background-image:         linear-gradient(top, #fff 0%, #eee 300px); /* W3C */
background-image:    -moz-linear-gradient(top, #fff 0%, #eee 300px); /* FF3.6+ */
background-image: -webkit-linear-gradient(top, #fff 0%, #eee 300px); /* Chrome10+,Safari5.1+ */

Selon la documentation actuelle de Mozilla: https://developer.mozilla.org/en/CSS/-moz-linear-gradient .

J'ai confirmé que cela fonctionne dans Firefox 3.6 et Chrome 15.

28
ReganY

Manière alternative

background-color: #eee;

background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(transparent));
background-image: -webkit-linear-gradient(top, #fff, transparent);
background-image: -moz-linear-gradient(top, #fff, transparent);
background-image: -o-linear-gradient(top, #fff, transparent);
background-image: linear-gradient(to bottom, #fff, transparent);

background-repeat:no-repeat;
background-size:100% 300px;
11
seanjacob

Premièrement, il est bon de savoir que vous pouvez utiliser plus de 2 palettes de couleurs sur les dégradés, mais vous ne pouvez pas utiliser de pixels fixes comme coordonnées, cela doit être un pourcentage.

Dans votre cas, vous pouvez simplement définir votre premier arrêt de couleur à 0% et le second à 50% environ. Je vous suggère d'utiliser un générateur de dégradé car l'implémentation dépend du navigateur.

Je suis venu avec

background: #FFFFFF; /* old browsers*/ 
background: -moz-linear-gradient(top, #FFFFFF 0%, #EEEEEE 50%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(50%,#EEEEEE)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE', GradientType=0); /* ie */
4
Baztoune
background: -moz-linear-gradient(top,  #d7d7d7 0px, #f3f3f3 178px);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#d7d7d7), color-stop(178px,#f3f3f3));
background: -webkit-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -o-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: -ms-linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);
background: linear-gradient(top,  #d7d7d7 0px,#f3f3f3 178px);

ça marche pour moi

3
Vicky Biswas

J'ai eu la même chose tout à l'heure. Je voulais mettre un dégradé sur la div principale du contenu qui variait considérablement en hauteur d'une page à l'autre.

Je me suis retrouvé avec cela et cela fonctionne très bien (et pas trop de code supplémentaire).

CSS:

.main-container {
  position: relative;
  width: 100%;
}
.gradient-container {
  /* gradient code from 0% to 100% -- from colorzilla.com */
  height: 115px; /* sets the height of my gradient in pixels */
  position: absolute; /* so that it doesn't ruin the flow of content */
  width: 100%;
}
.content-container {
  position: relative;
  width: 100%;
}

HTML:

<div class="main-container">
  <div class="gradient-container"></div> <!-- the only thing added for gradient -->
  <div class="content-container">
    <!-- the rest of my page content goes here -->
  </div>
</div>

Je recommande fortement d'utiliser l'éditeur de dégradés de colorzilla pour générer le CSS. L’optimisation inter-navigateurs est très facile (surtout si vous êtes habitué à Photoshop ou à Fireworks).

2
Scrimothy

La solution la plus simple au problème consiste simplement à utiliser plusieurs arrière-plans et à attribuer à la partie dégradée de l’arrière-plan une taille définie, en pourcentage ou en pixels.

body {
  background: linear-gradient(to right, green 0%, blue 100%), green;
  background-size: 100px 100%, 100%;
  background-repeat: no-repeat;
  background-position: right;
}

html,
body {
  height: 100%;
  margin: 0;
}

Mélangez et faites correspondre avec les préfixes du navigateur si nécessaire.

2
Nit

Vous pouvez faire un:

<div id="bgGen"></div>

puis

#bgGen{
   height: 400px;    
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee), color-stop(0.75, #eee));
   margin-bottom:-400px;
}

C'est un peu tricher, mais ça marche ...

1
Nitroware

cela a fonctionné pour moi

    background: rgb(238, 239, 240) rgb(192, 193, 194) 400px; 
background: -webkit-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: -moz-linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px); 
background: linear-gradient(rgba(192, 193, 194, 1), rgba(238, 239, 240, 1) 400px);
background-repeat:repeat-x; background-color:#eeeff0;

Aussi, quelqu'un a commenté pourquoi ne pas simplement faire une image en dégradé et la définir comme arrière-plan. Je préfère également utiliser la plupart des CSS maintenant, avec la conception mobile et l'utilisation limitée des données pour les visiteurs, essayez de limiter autant d'images que possible. Si css peut être fait avec css que de le faire 

0
user3438298