CSS: définit une couleur d'arrière-plan correspondant à 50% de la largeur de la fenêtre.
Essayer de créer un arrière-plan sur une page "divisée en deux"; deux couleurs sur les côtés opposés (apparemment effectué en définissant un background-color par défaut sur la balise body, puis en appliquant une autre sur une div qui s'étend sur toute la largeur de la fenêtre).
J'ai proposé une solution, mais malheureusement, la propriété background-size ne fonctionne pas dans IE7/8, ce qui est indispensable pour ce projet -
body { background: #fff; }
#wrapper {
background: url(1px.png) repeat-y;
background-size: 50% auto;
width: 100%;
}
Puisqu'il s'agit uniquement de couleurs unies, il existe peut-être un moyen d'utiliser uniquement la propriété background-color régulière?
Ancienne prise en charge du navigateur
Si la prise en charge des navigateurs plus anciens est indispensable, vous ne pourrez donc pas utiliser plusieurs arrière-plans ou dégradés, vous voudrez probablement faire quelque chose comme ceci sur un élément div en réserve:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Exemple: http://jsfiddle.net/PLfLW/1704/
La solution utilise un div fixe supplémentaire qui remplit la moitié de l’écran. Comme il est fixe, il restera en place même lorsque vos utilisateurs défileront. Vous devrez peut-être manipuler certains z-index plus tard pour vous assurer que vos autres éléments sont au-dessus de la division d'arrière-plan, mais cela ne devrait pas être trop complexe.
Si vous rencontrez des problèmes, assurez-vous simplement que le reste de votre contenu a un z-index supérieur à l'élément arrière-plan et vous devriez être prêt à partir.
Navigateurs modernes
Si les nouveaux navigateurs sont votre seule préoccupation, il existe deux autres méthodes que vous pouvez utiliser:
Gradient linéaire:
C'est certainement la solution la plus simple. Vous pouvez utiliser un dégradé linéaire dans la propriété background du corps pour une variété d’effets.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
Cela provoque une coupure dure à 50% pour chaque couleur, il n'y a donc pas de "dégradé" comme son nom l'indique. Essayez d’expérimenter avec le morceau "50%" du style pour voir les différents effets que vous pouvez obtenir.
Exemple: http://jsfiddle.net/v14m59pq/2/
Arrière-plans multiples avec taille d'arrière-plan:
Vous pouvez appliquer une couleur d'arrière-plan à l'élément html, puis appliquer une image d'arrière-plan à l'élément body et utiliser la propriété background-size pour la définir à 50% de la largeur de la page. Il en résulte un effet similaire, même s’il ne serait réellement utilisé sur des dégradés que si vous utilisiez une image ou deux.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
Exemple: http://jsfiddle.net/6vhshyxg/2/
EXTRA REMARQUE: Notez que les éléments html et body sont définis sur height: 100% dans les derniers exemples. Cela permet de s'assurer que même si votre contenu est plus petit que la page, l'arrière-plan sera au moins à la hauteur de la fenêtre d'affichage de l'utilisateur. Sans la hauteur explicite, l’effet d’arrière-plan ne descend que jusqu'au contenu de votre page. C'est aussi juste une bonne pratique en général.
Solution simple pour réaliser un fond "divisé en deux":
background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);
Vous pouvez également utiliser des degrés comme direction
background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);
cela devrait fonctionner avec du css pur.
background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));
testé sous Chrome uniquement.
Vous pouvez faire une distinction difficile au lieu d'un dégradé linéaire en mettant la deuxième couleur à 0%
Par exemple,
Gradient - background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);
Distinction difficile - background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);
Dans un projet précédent qui devait supporter IE8 +, j'ai réalisé cela en utilisant une image encodée au format data-url.
L'image faisait 2800x1px, la moitié de l'image était blanche et la moitié était transparente .
body {
/* 50% right white */
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;
/* 50% left white */
background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}
Vous pouvez le voir fonctionner ici JsFiddle . J'espère que cela pourra aider quelqu'un;)
C'est donc une question terriblement ancienne qui a déjà une réponse acceptée, mais je pense que cette réponse aurait été choisie si elle avait été postée il y a quatre ans.
J'ai résolu ce problème uniquement avec CSS et sans AUCUN ÉLÉMENTS DE DOM! Cela signifie que les deux couleurs sont purement cela, juste les couleurs de fond de ONE ELEMENT, pas la couleur de fond de deux.
J'ai utilisé un dégradé et, comme je règle la couleur si étroitement ensemble, il semble que les couleurs soient distinctes et qu'elles ne se mélangent pas.
Voici le dégradé en syntaxe native:
background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);
La couleur #74ABDD commence à 0% et est toujours #74ABDD à 49.9%.
Ensuite, je force le dégradé à passer à la couleur suivante dans 0.2% de la hauteur de l’élément, créant ainsi une ligne qui semble très solide entre les deux couleurs.
Voici le résultat:
S'amuser!
J'ai utilisé :after et cela fonctionne dans tous les principaux navigateurs. s'il vous plaît vérifier le lien. juste besoin de faire attention pour le z-index car après avoir position absolue.
<div class="splitBg">
<div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
<div style="float:left; width:50%; position:relative; z-index:10;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
<div style="float:left; width:50%; position:relative; z-index:10;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec,
</div>
<div style="clear:both;"></div>
</div>
</div>`
css
.splitBg{
background-color:#666;
position:relative;
overflow:hidden;
}
.splitBg:after{
width:50%;
position:absolute;
right:0;
top:0;
content:"";
display:block;
height:100%;
background-color:#06F;
z-index:1;
}
Vous pouvez utiliser le pseudo-sélecteur :after pour y parvenir, même si je ne suis pas sûr de la compatibilité avec les versions antérieures de ce sélecteur.
body {
background: #000000
}
body:after {
content:'';
position: fixed;
height: 100%;
width: 50%;
left: 50%;
background: #116699
}
J'ai utilisé cela pour avoir deux dégradés différents sur un fond de page.
L'option la plus sûre et sémantiquement correcte serait d'utiliser un pseudo-élément à position fixe (:after ou :before). En utilisant cette technique, n'oubliez pas de définir z-index aux éléments à l'intérieur du conteneur. Notez également que la règle content:"" pour le pseudo-élément est nécessaire, sinon elle ne sera pas rendue.
#container {...}
#content:before {
content:"";
background-color: #999;
height: 100%;
left: 0px;
position: fixed;
top: 0px;
width: 50%;
z-index: 1;
}
#content * {
position: relative;
z-index:2;
}
Exemple en direct: https://jsfiddle.net/xraymutation/pwz7t6we/16/
L’un des moyens de mettre en œuvre votre problème consiste à saisir une seule ligne dans votre div:
background-image: linear-gradient(90deg, black 50%, blue 50%);
Voici un code de démonstration et plus d'options (horizontal, diagonal, etc.), vous pouvez cliquer sur "Exécuter l'extrait de code" pour le voir en direct.
.abWhiteAndBlack
{
background-image: linear-gradient(90deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}
.abWhiteAndBlack2
{
background-image: linear-gradient(180deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}
.abWhiteAndBlack3
{
background-image: linear-gradient(45deg, black 50%, blue 50%);
height: 300px;
width: 300px;
margin-bottom: 80px;
}Vertical:
<div class="abWhiteAndBlack">
</div>
Horizonal:
<div class="abWhiteAndBlack2">
</div>
Diagonal:
<div class="abWhiteAndBlack3">
</div>Utilisez sur votre image bg
Scission verticale
background-size: 50% 100%
Scission horizontale
background-size: 100% 50%
Exemple
.class {
background-image: url("");
background-color: #fff;
background-repeat: no-repeat;
background-size: 50% 100%;
}
Ceci est un exemple qui fonctionnera sur la plupart des navigateurs.
En gros, vous utilisez deux couleurs d’arrière-plan, la première de 0% à 50% et la seconde de 51% à 100%
J'utilise l'orientation horizontale:
background: #000000;
background: -moz-linear-gradient(left, #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right, #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
Pour différents réglages, vous pouvez utiliser http://www.colorzilla.com/gradient-editor/