Comment puis-je créer un arrière-plan divisé en deux couleurs en CSS ?

CSS : définir une couleur d'arrière-plan qui correspond à 50 % de la fenêtre

Essayer d'obtenir un arrière-plan sur une page qui est " divisé en deux" ; deux couleurs sur des côtés opposés ? Heureusement, il existe plusieurs façons d'obtenir cet effet, en fonction des exigences de prise en charge de votre navigateur.

Prise en charge des navigateurs plus anciens

Si la prise en charge des navigateurs plus anciens est indispensable, vous je devrai utiliser un div fixe supplémentaire qui remplit la moitié de l'écran et définir son arrière-plan couleur.

<pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

Navigateurs modernes

Si les navigateurs les plus récents sont votre seule préoccupation, vous en avez plus options :

Dégradé linéaire :

<pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

Arrière-plans multiples avec background-size :

<pre class="brush:php;toolbar:false">height: 100%;
background-color: cyan;

}

corps {

height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;

}

N'oubliez pas de définir la hauteur à 100 % pour les éléments html et body afin assurez-vous que l'arrière-plan couvre toute la fenêtre d'affichage.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!