28172 sujets

CSS et mise en forme, CSS3

[Résolu] Double dégradé dans une div

Bonjour,
J'utilise un linear gradient pour séparer deux zones de contenu de ma div principale.
Mais l'une de ces deux zones a déjà un background dégradé (radial gradient).
Quelle serait la syntaxe pour combiner les deux dégradés dans une seule isntruction "background:" ?
https://codepen.io/adage/pen/wpKmzb
Merci.
Modifié par Adage (16 Dec 2017 - 16:41)
Bonjour,
Il suffit de mettre une virgule pour séparer chaque déclaration de background
background : 
/* premier ensemble */
  url(/img/background-image-1.jpg) repeat-x -20% 30% / auto content-box scroll,
/* second ensemble */
  url(/img/background-image-2.png) no-repeat 30px -20px / auto padding-box scroll,
/* dernier ensemble avec couleur d'arrière-plan */
  red url(/img/background-3.gif) repeat left 10px top 10px / auto border-box scroll;


Le premier ensemble se trouvera devant le second ensemble
Le second ensemble se trouvera devant dernier ensemble

idem pour background-size, mettre une virgule pour séparer chaque déclaration
background-size : size-declaration-image-1, size-declaration-image-2, size-declaration-image-3;

Mais comme tes background-size ont la même valeur ne faire qu'une déclaration
Modifié par aliasdmc (16 Dec 2017 - 17:06)
Meilleure solution
Haha. Génial !
Merci beaucoup, j'ai presque failli croire que c'était impossible, mais en fait c'était facile Smiley cligne
Merci !
aliasdmc a écrit :
Bonjour,
Il suffit de mettre une virgule pour séparer chaque déclaration de background
background : 
/* premier ensemble */
  url(/img/background-image-1.jpg) repeat-x -20% 30% / auto content-box scroll,
/* second ensemble */
  url(/img/background-image-2.png) no-repeat 30px -20px / auto padding-box scroll,
/* dernier ensemble avec couleur d'arrière-plan */
  red url(/img/background-3.gif) repeat left 10px top 10px / auto border-box scroll;


Le premier ensemble se trouvera devant le second ensemble
Le second ensemble se trouvera devant dernier ensemble

idem pour background-size, mettre une virgule pour séparer chaque déclaration
background-size : size-declaration-image-1, size-declaration-image-2, size-declaration-image-3;

Mais comme tes background-size ont la même valeur ne faire qu'une déclaration


Merci aliasdmc pour la solution. J'essaie de combiner deux fond d'image en CSS.
Sujet clos
Aller à