28172 sujets

CSS et mise en forme, CSS3

Background : deux couleurs

Bonjour les Kiwis ! Smiley langue

Dites moi, je cherche à avoir un fond (background) avec deux couleurs.. ma couleur 1 s'arrête a 250px par exemple et ma couleur 2 commence à 251px et continue jusque l'infini et au-delà ! Smiley lol

Pour le moment j'ai fait ça : 
background: linear-gradient(to bottom, #ffffff 20%,#f0f4f4 20%)
;
Bonsoir.

Je propose :
background-image : linear-gradient(to bottom, #fff 250px, #f0f4f4 250px);


(Le problème de background est qu'il remet toutes les autres valeurs à leur valeur par défaut.)
Zelena a écrit :

(Le problème de background est qu'il remet toutes les autres valeurs à leur valeur par défaut.)


ça veut dire quoi ? Smiley lol

Avec le linear-gradient, j'ai une zone de flou, la zone de jonction des couleurs. Je n'arrive pas à supprimer ce flou Smiley rolleyes .

Avec des border je ne pourrai pas tricher et créer une border-top de 250px ?
Si une autre couleur redémarre là où l'autre s'est arrêtée, il n'y a pas de flou (en tout cas chez moi il n'y en a pas).

'Background' est une méga-propriété : elle rassemble 'background-image', 'background-repeat', 'background-attachment', 'background-position', 'background-color' et puis d'autres...

En l'utilisant, on remet les valeurs de ces propriétés à leur valeur par défaut.

Smiley smile

Edit : border ? Si ça marche... pourquoi pas. Smiley sweatdrop
Modifié par Zelena (13 Feb 2017 - 20:29)
Administrateur
Bonjour,
blond1n a écrit :
ma couleur 1 s'arrête a 250px par exemple et ma couleur 2 commence à 251px

Nan 250px (2 fois) : ça évite le 1px de flou comme dit précédemment.

Si ça fonctionne toujours (edit) pas, un Codepen stp Smiley cligne
Modifié par Felipe (13 Feb 2017 - 21:14)
Je viens de mettre 251 à la place, ça parait moins flou mais ça reste plus flou que la séparation entre deux div de couleurs différentes. .
Sujet clos
Aller à