Comment puis-je créer un arrière-plan bicolore occupant 50 % de la largeur de la fenêtre, en tenant compte de la compatibilité du navigateur ?

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

Pour tenter de créer un arrière-plan divisé en deux couleurs distinctes sur un site Web page, la propriété background-color a été utilisée sur la balise body, tandis qu'une autre est appliquée à un div qui englobe l'intégralité de la fenêtre. Cependant, la propriété background-size est incompatible avec IE7/8, ce qui rend cette solution peu pratique.

Prise en charge des navigateurs plus anciens

Pour les situations où les navigateurs plus anciens posent des limitations, envisagez d'utiliser un élément div distinct, positionné au sein de la page, pour obtenir l'effet souhaité :

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

Exemple : http://jsfiddle.net/PLfLW/1704/

Cette approche utilise un div fixe qui couvre la moitié de l'écran, restant stationnaire même lorsque les utilisateurs font défiler. Certains ajustements des index Z peuvent être nécessaires pour garantir que les autres éléments de la page sont correctement positionnés.

Navigateurs modernes

Pour les navigateurs offrant une prise en charge plus à jour, envisagez ces méthodes alternatives :

Dégradé linéaire :

Cette technique est la plus simple. En employant un dégradé linéaire dans la propriété d'arrière-plan de l'élément body, divers effets peuvent être obtenus :

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

Exemple : http://jsfiddle.net/v14m59pq/2/

Arrière-plans multiples avec taille d'arrière-plan :

Ici, une couleur d'arrière-plan est attribuée au html élément, tandis qu'une image d'arrière-plan est appliquée au corps. La propriété background-size est ensuite utilisée pour définir la largeur de l'image à 50 % de la page :

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/

Remarque supplémentaire :

Dans les exemples pour les navigateurs modernes, les éléments html et body reçoivent tous deux un hauteur de 100%. Cela garantit que même si le contenu de la page est plus court que la fenêtre d'affichage, l'arrière-plan s'étend sur toute la hauteur de l'écran de l'utilisateur. Il est généralement considéré comme une bonne pratique de définir des hauteurs explicites pour ces éléments.

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!