web-dev-qa-db-fra.com

Comment peut appliquer plusieurs couleurs de fond à une div

J'ai un scénario où je devrais utiliser plusieurs couleurs de fond pour un div. C’est mieux pour moi que d’utiliser des images de fond ou des images supplémentaires. Mais, je ne trouve pas de moyen plus simple de l’utiliser par CSS. Donc, j'ai besoin d'aide sur un scénario. S'il vous plaît, voir l'image:

 

(1) Je veux construire "A". pour cela j'ai écrit:

div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }

Mais, après avoir écrit ce code, ça va ressembler à "B". Mais, je veux exactement comme "A". Alors, par css/css3 comment puis-je le faire (sans ajouter plus de divs)?

(2) Est-il possible de rendre une portion plus petite qu'une autre? Par exemple, en "C", la couleur bleue est plus petite (en hauteur) que l’autre partie. Comment, puis-je appliquer plusieurs couleurs d'arrière-plan à une div en rendant une partie plus petite comme "C" (sans ajouter de divs supplémentaires à "C")?

Mise à jour: Après la réponse de @ Mohammad, j'ai essayé de cette façon. Mais, pour le scénario "C", je ne peux pas diminuer la hauteur de la partie bleue. Pouvez-vous s'il vous plaît, dites-moi comment puis-je le faire? 
jsfiddle.net/mFjQ6

htmlcss3css
26
user1896653

La division A peut en réalité être faite sans le sélecteur :before ou :after, mais en utilisant un dégradé linéaire lors de votre première tentative. La seule différence est que vous devez spécifier 4 positions. Gris foncé de 0 à 50% et gris clair de 50% à 100%, comme ceci:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);

Comme vous le savez, B div est constitué d'un gradient linéaire ayant 2 positions comme celle-ci:

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

Pour le div C, j'utilise le même genre de dégradé que div A ike this:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);

Mais cette fois, j'ai utilisé le sélecteur :after avec un fond blanc, comme si la deuxième partie de votre div était plus petite. * Veuillez noter que j'ai ajouté une meilleure alternative ci-dessous.

Vérifiez ce jsfiddle ou l'extrait ci-dessous pour obtenir le code complet pour tous les navigateurs.

div{
    position:relative;
    width:80%;
    height:100px;
    color:red;
    text-align:center;
    line-height:100px;
    margin-bottom:10px;
}

.a{
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}

.b{
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}

.c{    
    background: #9c9e9f; /* Old browsers */
    background: -moz-linear-gradient(left,  #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(left,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
    background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
    content:"";
    position:absolute;
    right:0;
    bottom:0;
    width:50%;
    height:20%;
    background-color:white;
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

Il existe également une alternative pour la div C sans utiliser d’arrière-plan blanc pour masquer la partie de la deuxième section .Au lieu de cela, nous rendons la deuxième partie transparente et nous utilisons le sélecteur :after pour agir en tant que fond coloré avec le contenu souhaité. position et taille.

Voir ceci jsfiddle ou l'extrait ci-dessous pour cette solution mise à jour.

div {
  position: relative;
  width: 80%;
  height: 100px;
  color: red;
  text-align: center;
  line-height: 100px;
  margin-bottom: 10px;
}

.a {
  background: #9c9e9f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* IE10+ */
  background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
  /* IE6-9 */
}

.b {
  background: #9c9e9f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
  /* IE10+ */
  background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
  /* IE6-9 */
}

.c {
  background: #9c9e9f;
  /* Old browsers */
  background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* IE10+ */
  background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
  /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1);
  /* IE6-9 */
}

.c:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 80%;
  background-color: #33ccff;
  z-index: -1
}
<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>

47
morgul

Désolé pour le malentendu, d'après ce que j'ai compris, vous voulez que votre DIV ait trois couleurs différentes avec des hauteurs différentes. Ceci est la sortie de mon code:

output, 

Si c'est ce que vous voulez, essayez ce code:

div {
    height: 100px;
    width:400px;
    position: relative;
}
.c {
    background: blue; /* Old browsers */
}

.c:after{
    content: '';
    position: absolute;
    width:20%;
    left:0;
    height:110%;
    background: yellow;
}
.c:before{
    content: '';
    position: absolute;
    width:40%;
    left:60%;
    height:140%;
    background: green;
}
<div class="c"></div>

4
No one

Vous pouvez appliquer à la fois la couleur de fond et la bordure pour donner l’apparence de 2 couleurs.

div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }

La bordure doit avoir la même taille que la largeur.

3
Axel B

il est compatible avec tous les navigateurs, changez les valeurs pour correspondre à votre application

background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
1
No one

Vous pouvez créer quelque chose comme c en utilisant plusieurs arrière-plans CSS.

div {
    background: linear-gradient(red, red),
                linear-gradient(blue, blue),
                linear-gradient(green, green);
    background-size: 30% 50%,
                     30% 60%,
                     40% 80%;
    background-position: 0% top,
                         calc(30% * 100 / (100 - 30)) top,
                         calc(60% * 100 / (100 - 40)) top;
    background-repeat: no-repeat;
}

Notez que vous devez toujours utiliser des dégradés linéaires pour les types d'arrière-plan, car CSS ne vous permettra pas de contrôler la taille de l'arrière-plan d'un seul calque de couleur. Nous ne faisons donc ici qu’un dégradé monochrome. Ensuite, vous pouvez contrôler la taille/la position de chacun de ces blocs de couleur indépendamment. Vous devez également vous assurer qu'ils ne se répètent pas, sinon ils agrandiront et couvriront toute l'image.

La partie la plus délicate ici est la position d'arrière-plan. Une position d'arrière-plan de 0% place le bord gauche de votre élément à gauche. 100% met son bord droit à droite. 50% des centres est moyen.

Pour résoudre un peu de maths amusant, vous pouvez deviner que la transformation est probablement linéaire et il suffit de résoudre deux petites équations d'interception de pente.

// (at 0%, the div's left Edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right Edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)

donc pour positionner notre 40% large div 60% depuis la gauche, nous le mettons à 60% * 100/(100 - 40) (ou utilisons css-calc).

0
WesJ

Avec: après et: avant, vous pouvez le faire.

HTML:

<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>

CSS:

div {
    height: 100px;
    position: relative;
}
.a {
    background: #9C9E9F;
}
.b {
    background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
    content: '';
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    display: block;
    position: absolute;
}
.a:after {
    background: #f6f6f6;    
}
.c:before {
    background: #9c9e9f;
    left: 0;
}
.c:after {
    background: #33CCFF;
    right: 0;
    height: 80%;
}

Et un demo .

0
LinkinTED