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

Question

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

Demandé el 16 de Décembre, 2011: Quand la question a-t-elle été
644822 affichage: Nombre de visites la question a
4 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie d'obtenir un arrière-plan sur une page qui est "divisée en deux", c'est-à-dire deux couleurs sur des côtés opposés (ce qui semble être le cas en définissant une valeur par défaut). background-color sur le body puis en appliquer une autre sur une balise div qui s'étend sur toute la largeur de la fenêtre).

J'ai trouvé une solution mais, malheureusement, la background-size ne fonctionne pas dans IE7/8, ce qui est indispensable pour ce projet.

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

Puisqu'il ne s'agit que de couleurs unies, il y a peut-être un moyen d'utiliser uniquement la fonction ordinaire background-color la propriété ?

Demandé el 16 de Décembre, 2011 par Staffan Estberg

Answer 1

4 Réponses

Answer 2

4voto

Jan Ranostaj Points 136

Utilisez sur votre image bg

Division verticale

background-size: 50% 100%

Division horizontale

background-size: 100% 50%

Exemple

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

Répondu el 15 de Décembre, 2014 par Jan Ranostaj (136 Points )

Answer 3

3voto

Arkadiusz Lendzian Points 289

L'option la plus sûre et la plus correcte d'un point de vue sémantique serait d'utiliser des pseudo-éléments à position fixe ( ::after o ::before ). En utilisant cette technique, n'oubliez pas de régler z-index aux éléments situés à l'intérieur du conteneur. Gardez également à l'esprit que content:"" pour le pseudo-élément est nécessaire, sinon il ne sera pas rendu.

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}

#content * {
  position: relative;
  z-index:2;
}

Exemple concret : https://jsfiddle.net/xraymutation/pwz7t6we/16/

Répondu el 5 de Mars, 2018 par Arkadiusz Lendzian (289 Points )

Answer 4

2voto

Sundaram Seth Points 63

.background{
 background: -webkit-linear-gradient(top, #2897e0 40%, #F1F1F1 40%);
 height:200px;

}

.background2{
  background: -webkit-linear-gradient(right, #2897e0 50%, #28e09c 50%);

 height:200px;

}

<html>
<body class="one">

<div class="background">
</div>
<div class="background2">
</div>
</body>
</html>

Répondu el 7 de Septembre, 2019 par Sundaram Seth (63 Points )

Answer 5

1voto

Sorin Haidau Points 89

Il s'agit d'un exemple qui fonctionnera sur la plupart des navigateurs.
En fait, vous utilisez deux couleurs de fond, la première commençant à 0 % et se terminant à 50 % et la seconde commençant à 51 % et se terminant à 100 %.

J'utilise l'orientation horizontale :

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

Pour des ajustements différents, vous pouvez utiliser http://www.colorzilla.com/gradient-editor/

Répondu el 28 de Mai, 2014 par Sorin Haidau (89 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: