Comment créer une couleur d'arrière-plan de 50 % de largeur en CSS sans rompre la compatibilité des anciens navigateurs ?

CSS : obtenir une couleur d'arrière-plan de 50 % de largeur

Dans la conception Web, créer un arrière-plan qui ne couvre qu'une partie de l'écran, comme 50 % de sa largeur est une exigence courante. Cependant, la question se pose : comment y parvenir sans utiliser des méthodes qui ne sont pas prises en charge par les anciens navigateurs ? Cet article explore des approches alternatives pour appliquer une couleur d'arrière-plan qui couvre 50 % de la largeur de la fenêtre.

Arrière-plan bicolore à l'aide d'un Div

Pour les navigateurs comme IE7/8 qui ne prennent pas en charge l'arrière-plan -size, nous pouvons utiliser une solution de contournement en créant un élément div fixe :

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

Ce div, positionné fixe en haut à gauche, remplit la moitié de l'écran avec une couleur de fond, donnant l'effet souhaité d'un fond bicolore. Ajustez la couleur d'arrière-plan si nécessaire.

Dégradé linéaire pour les navigateurs modernes

Si la prise en charge des navigateurs plus anciens n'est pas un problème, nous pouvons utiliser un dégradé linéaire dans la propriété d'arrière-plan du corps :

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

Ce CSS crée une division nette entre deux couleurs à mi-chemin, ce qui donne un arrière-plan qui passe de manière transparente d'une couleur à l'autre. un autre.

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

Pour les navigateurs prenant en charge la taille d'arrière-plan, nous pouvons combiner une couleur d'arrière-plan sur l'élément html avec une image d'arrière-plan sur le corps :

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

Cette approche aboutit à un arrière-plan qui couvre 50 % de la largeur de la fenêtre, en utilisant soit une couleur unie, soit une image.

Remarque : assurer Arrière-plan plein écran

Dans tous les exemples, définir la hauteur des éléments html et body à 100 % garantit que l'arrière-plan couvre toute la fenêtre d'affichage, même si le contenu de la page est plus court. Il s'agit d'une pratique recommandée pour les effets d'arrière-plan en plein écran.

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!