Comment puis-je utiliser des dégradés CSS3 pour mon background-color
et ensuite appliquer un background-image
pour appliquer une sorte de texture transparente légère ?
Des arrière-plans multiples !
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Ces 2 lignes sont le fallback pour tout navigateur qui ne fait pas de dégradés. Voir les notes pour l'empilement des images uniquement IE < 9 ci-dessous.
La dernière ligne définit une image de fond et un dégradé pour les navigateurs qui peuvent les gérer.
Presque tous les navigateurs actuels prennent en charge les images d'arrière-plan multiples et les arrière-plans css. Consultez http://caniuse.com/#feat=css-gradients pour connaître la prise en charge des navigateurs. Pour un bon article expliquant pourquoi vous n'avez pas besoin de préfixes multiples pour les navigateurs, consultez http://codepen.io/thebabydino/full/pjxVWp/.
Pile de couches
Il convient de noter que la première image définie sera la plus haute dans la pile. Dans ce cas, l'image se trouve au-dessus du dégradé.
Pour plus d'informations sur la superposition de l'arrière-plan, voir http://www.w3.org/TR/css3-background/#layering.
Empilage d'images UNIQUEMENT (pas de dégradés dans la déclaration) Pour IE < 9.
Les IE9 et plus peuvent empiler les images de la même manière. Vous pouvez utiliser cette méthode pour créer une image à dégradé pour IE9, mais personnellement, je ne le ferais pas. Cependant, il faut noter que lorsque vous utilisez uniquement des images, ie < 9 ignorera la déclaration de repli et n'affichera aucune image. Cela ne se produit pas lorsqu'un dégradé est inclus. Pour utiliser une seule image de repli dans ce cas, je suggère d'utiliser le merveilleux [élément HTML conditionnel][1] de Paul Irish avec votre code de repli :
.lte9 #target{ background-image: url("IMAGE_URL"); }
**Position de l'arrière-plan, taille, etc.
Les autres propriétés qui s'appliquent à une seule image peuvent également être séparées par des virgules. Si une seule valeur est fournie, elle sera appliquée à toutes les images empilées, y compris le dégradé. background-size : 40px;
contraindra l'image et le dégradé à 40px de hauteur et de largeur. Cependant, en utilisant background-size : 40px, cover;
, l'image aura 40px et le dégradé couvrira l'élément. Pour appliquer un paramètre à une seule image, définissez la valeur par défaut pour l'autre : background-position : 50%, 0 0;
ou pour [les navigateurs qui le supportent] (http://caniuse.com/#feat=css-initial-value) utilisez initial
: background-position : 50%, initial;
Vous pouvez également utiliser le raccourci background, mais cela supprime la couleur et l'image de repli.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
Il en va de même pour background-position, background-repeat, etc.
[1] : http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Il faut savoir que la première image d'arrière-plan définie est la plus haute dans la pile. La dernière image définie sera en bas de la pile. Cela signifie que, pour avoir un dégradé d'arrière-plan derrière une image, il faut :
body {
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
background-image: url("http://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
}
Vous pourriez également définir des positions et une taille d'arrière-plan pour les images. J'ai rédigé un article de blog sur les choses intéressantes que vous pouvez faire avec les [gradients CSS3][1].
[1] : http://css3wizardry.com/2010/08/19/css3-gradients-and-patterns/
J'ai essayé de faire la même chose. Alors que la couleur d'arrière-plan et l'image d'arrière-plan existent sur des couches distinctes dans un objet - ce qui signifie qu'elles peuvent coexister - les dégradés CSS semblent coopter la couche d'image d'arrière-plan.
D'après ce que je peux dire, border-image semble avoir un support plus large que les arrière-plans multiples, donc peut-être que c'est une approche alternative.
http://articles.sitepoint.com/article/css3-border-images
UPDATE : Un peu plus de recherche. Il semble que Petra Gregorova a quelque chose qui fonctionne ici --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html