Comment puis-je créer un arrière-plan bicolore en CSS, avec une couleur occupant 50 % de la largeur de la fenêtre ?

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

Problème :

Rechercher un moyen de diviser l'arrière-plan d'une page en deux couleurs différentes, avec une couleur occupant 50 % de la largeur de la fenêtre.

Solution :

Prise en charge des anciens navigateurs

Dans les cas où la prise en charge des navigateurs existants est essentiel (par exemple, IE7/8), envisagez d'utiliser un élément div dédié pour obtenir le résultat souhaité. effet :

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

Le div, positionné de manière fixe, remplit la moitié de l'écran et reste en place pendant le défilement.

Navigateurs modernes

Pour les navigateurs modernes, plusieurs méthodes alternatives sont disponibles :

Linéaire Dégradé

L'exploitation d'un dégradé linéaire dans la propriété d'arrière-plan du corps fournit une solution simple :

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

Cela crée une division nette entre les couleurs à la barre des 50 %.

Plusieurs arrière-plans avec background-size

L'attribution d'une couleur d'arrière-plan à l'élément html et l'application d'une image d'arrière-plan avec un paramètre de taille d'arrière-plan de 50 % à l'élément body donne un résultat similaire :

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;
}

Remarque : Dans ces derniers exemples, height : 100 % est défini à la fois pour le HTML et le corps afin de garantir que l'arrière-plan s'étend sur toute la longueur. fenêtre entière, quelle que soit la hauteur du contenu de la page.

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!