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

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

Barbara Streisand

Libérer： 2024-12-13 20:22:12

original

242 Les gens l'ont consulté

How to Create a 50% Window-Width Background Color Split in 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%;
}

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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!

source：php.cn

Article précédent：Comment obtenir les dimensions de l'image d'arrière-plan d'une div à l'aide de jQuery ? Article suivant：Pourquoi mon texte Chrome est-il flou après la transformation CSS et comment puis-je y remédier ?

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2184

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2331

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1961

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...