Comment créer une répartition de couleur d'arrière-plan de 50 % de la largeur de la fenêtre en CSS ?

CSS : obtenir une couleur d'arrière-plan correspondant à 50 % de la largeur de la fenêtre

Dans le développement Web, il est parfois nécessaire de créer un arrière-plan divisé en deux, présentant différents couleurs sur les côtés opposés. Traditionnellement, cet effet était obtenu en définissant une couleur d'arrière-plan par défaut sur le champ et superposer une balise

avec une couleur d'arrière-plan alternative qui s'étend sur toute la largeur de la fenêtre.

Défis liés à la prise en charge de la taille d'arrière-plan

Une approche pour diviser l'arrière-plan consiste à utiliser la propriété background-size, qui permet de spécifier la taille de l'image d'arrière-plan. Cet extrait de code illustre cette méthode :

body {
    background: #fff;
}
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

Cependant, cette solution n'est pas viable pour les projets qui nécessitent une compatibilité avec Internet Explorer 7/8, car ces navigateurs ne prennent pas en charge la propriété background-size.

Solution utilisant un élément Div dédié

Pour les navigateurs plus anciens, une approche alternative consiste à créer un élément

élément avec une position fixe :

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

Ce div fixe reste stationnaire pendant que la page défile et crée l'effet d'arrière-plan divisé souhaité.

Options pour les navigateurs modernes

Pour projets prenant en charge les navigateurs modernes, des techniques supplémentaires peuvent être utilisées :

Linéaire Dégradé :

Les dégradés linéaires offrent un moyen simple de diviser les arrière-plans. En utilisant un dégradé linéaire dans la propriété background du , vous pouvez créer une coupure stricte à 50 % pour chaque couleur :

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

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

Cette méthode consiste à appliquer une couleur d'arrière-plan au fichier puis en utilisant un élément image d'arrière-plan avec une taille d'arrière-plan définie sur 50 % de la largeur de la page :

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

Remarque supplémentaire

Pour garantir que l'arrière-plan couvre toute la fenêtre d'affichage, il est recommandé de définir la hauteur des deux le et éléments à 100%. Cela garantit que l'arrière-plan s'étendra jusqu'à la fenêtre d'affichage de l'utilisateur, même si le contenu de la page est plus court.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Comment réparer KB5055612 ne parvient pas à s'installer dans Windows 10?

4 Il y a quelques semaines By DDD

<🎜>: Grow A Garden - Guide de mutation complet

3 Il y a quelques semaines By DDD

<🎜>: Bubble Gum Simulator Infinity - Comment obtenir et utiliser les clés royales

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Système de fusion, expliqué

4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Comment déverrouiller le grappin

3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Tutoriel Java

1670

14

Tutoriel CakePHP

1428

52

Tutoriel Laravel

1329

25

Tutoriel PHP

1276

29

Tutoriel C#

1256

24

Afficher plus