Comment combiner une image d'arrière-plan et un dégradé CSS3 sur le même élément?


1251

Comment utiliser les dégradés CSS3 pour mon background-color, puis appliquer un background-imagepour appliquer une sorte de texture transparente à la lumière?


9
Remarque: vous pouvez également positionner l'image d'arrière-plan (centre 15 pixels) ou définir sa propriété 'repeat' de cette manière (l'exemple fonctionne pour Firefox 3.6+) .some-class {background: url ("../ icon.png") no- répéter 15px centre, -moz-linear-gradient (centre haut, #FFFFFF, #DDDDDD);}
Julien Bérubé

SVG ou SVG + CSS peuvent être utilisés pour créer des textures plates (bruit) ou des dégradés texturés, respectivement.
Clint Pachl

Réponses:


1544

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 repli de tout navigateur qui ne fait pas de dégradés. Voir les notes pour empiler les images uniquement IE <9 ci-dessous.

  • La ligne 1 définit une couleur d'arrière-plan plate.
  • La ligne 2 définit le repli de l'image d'arrière-plan.

La dernière ligne définit une image d'arrière-plan et un dégradé pour les navigateurs qui peuvent les gérer.

  • La ligne 3 est destinée à tous les navigateurs relativement modernes.

Presque tous les navigateurs actuels prennent en charge plusieurs images d'arrière-plan et arrière-plans CSS. Voir http://caniuse.com/#feat=css-gradients pour la prise en charge du navigateur. Pour un bon article sur les raisons pour lesquelles vous n'avez pas besoin de plusieurs préfixes de navigateur, voir http://codepen.io/thebabydino/full/pjxVWp/

Pile de couches

Il convient de noter que la première image définie sera la plus haute de la pile. Dans ce cas, l'image est en haut du dégradé.

Pour plus d'informations sur la superposition d'arrière-plan, voir http://www.w3.org/TR/css3-background/#layering .

Empiler les images UNIQUEMENT (pas de dégradés dans la déclaration) Pour IE <9

IE9 et les versions ultérieures peuvent empiler les images de la même manière. Vous pouvez l'utiliser pour créer une image dégradée pour ie9, mais personnellement, je ne le ferais pas. Cependant à noter lorsque vous utilisez uniquement des images, c'est-à-dire que <9 ignorera l'instruction de secours et ne montrera aucune image. Cela ne se produit pas lorsqu'un dégradé est inclus. Pour utiliser une seule image de secours dans ce cas, je suggère d'utiliser le merveilleux élément HTML conditionnel de Paul Irish avec votre code de secours:

.lte9 #target{ background-image: url("IMAGE_URL"); }

Position d'arrière-plan, dimensionnement, etc.

D'autres propriétés qui s'appliqueraient à 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é à une hauteur et une largeur de 40 pixels. Cependant, l'utilisation background-size: 40px, cover;rendra l'image 40px et le dégradé couvrira l'élément. Pour appliquer uniquement un paramètre à une image, définissez la valeur par défaut pour l'autre: background-position: 50%, 0 0;ou pour les navigateurs qui la prennent en charge, utilisez initial:background-position: 50%, initial;

Vous pouvez également utiliser le raccourci d'arrière-plan, mais cela supprime la couleur et l'image de secours.

body{
    background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}

Il en va de même pour l'arrière-plan, l'arrière-plan, etc.


36
Merci pour votre réponse, des idées sur la façon de contrôler ensuite le background-positionjuste pour l'image et non le dégradé?
adardesign

44
merci pour cela, excellente information. | @adardesign: utilisez le raccourci d'arrière-plan. En modifiant l'exemple ci-dessus, ce serait: background: url (IMAGE_URL) sans répétition en haut à gauche, [gradient approprié];
RussellUresti

14
@adardesign: background: url ("../ images / icon.png") centre 15px sans répétition, -moz-gradient linéaire (centre haut, #FFFFFF, #DDDDDD); / * remarquez 15px centre, il ajoutera un rembourrage gauche de 15px et aligner verticalement au centre l'icône.png * /
Julien Bérubé

2
en chrome au moins, vous pouvez contrôler la position d'arrière-plan pour plusieurs images en utilisant le coma pour séparer les valeurs .. comme ceci .. position d'arrière-plan: 0px 8px, 0px 0px ...
Orlando

1
Il vaut probablement aussi la peine de noter que si vous devez spécifier le positionnement d'autres attributs de l'image, vous pouvez utiliser les propriétés d'arrière-plan css plus loin dans la règle css. Par exemple: background-repeat: no-repeat; position de fond: centre; taille de l'arrière-plan: 1300px 1303px;
Phill Healey

86

Si vous souhaitez également définir la position d'arrière-plan de votre image, vous pouvez utiliser ceci:

background-color: #444; // fallback
background: url('PATH-TO-IMG') center center no-repeat; // fallback

background: url('PATH-TO-IMG') center center no-repeat, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
background: url('PATH-TO-IMG') center center no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
background: url('PATH-TO-IMG') center center no-repeat, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
background: url('PATH-TO-IMG') center center no-repeat, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10

ou vous pouvez également créer un mixin MOINS (style bootstrap):

#gradient {
    .vertical-with-image(@startColor: #555, @endColor: #333, @image) {
        background-color: mix(@startColor, @endColor, 60%); // fallback
        background-image: @image; // fallback

        background: @image, -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+
        background: @image, -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)); // Safari 4+, Chrome 2+
        background: @image, -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+
        background: @image, -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10
        background: @image, linear-gradient(to bottom, @startColor, @endColor); // Standard, IE10
    }
}

Le seul sur cette page qui a fonctionné pour moi. Je l'ai cependant utilisé avec du CSS normal. Tous les autres que j'ai essayés masquaient en fait l'image avec la couleur de dégradé de superposition.
Ska

@Ska - Inversez simplement l'ordre, le z-index fonctionne dans l'autre sens ici. Voir stackoverflow.com/questions/14915542/… .
Frank Conijn

46

Une chose à réaliser est que la première image d'arrière-plan définie est la plus haute de la pile. La dernière image définie sera la plus basse. Cela signifie que pour avoir un dégradé d'arrière-plan derrière une image, vous aurez besoin de:

  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 pouvez également définir des positions et une taille d'arrière-plan pour les images. J'ai préparé un article de blog sur certaines choses intéressantes que vous pouvez faire avec les dégradés CSS3


2
La réponse serait encore meilleure lorsque la notation des normes W3C arrivera à la fin.
Volker E.

4
Ce code ne semble pas fonctionner correctement. nous ne pouvons voir que l'image stackOverflow, pas l'image d'arrière-plan derrière / avant.
Ou A.

Je pense que -webkit-gradient pourrait être obsolète stackoverflow.com/questions/10683364/…
alpalalpal

Le code peut ne pas fonctionner mais c'est un point très important. Vous pouvez réorganiser le fonctionnement des éléments d'arrière-plan, mais vous devez penser à leur superposition. Si vous voulez le dégradé au-dessus de l'image, mettez-le en premier et vous voudrez probablement nous RGBa afin que vous puissiez voir l'image derrière:background-image: linear-gradient(rgba(22,22,22,0), rgba(22,22,22,0.6)), url('image.jpg');
serraosays

34

vous pouvez simplement taper:

background: linear-gradient(
    to bottom,
    rgba(0,0,0, 0),
    rgba(0,0,0, 100)
  ),url(../images/image.jpg);


1
C'était la seule solution qui fonctionnait pour moi (Firefox v57). Le linear-gradient()devait venir avant le url(), et une transparence partielle devait être utilisée pour les couleurs dégradées, en utilisant rgba(). N'importe quoi d'autre a simplement utilisé la première définition de la liste (comme si la seconde était une solution de repli, similaire au fonctionnement des font-familydéclarations).
waldyrious

@waldyrious note que l'utilisateur veut appliquer une sorte de texture transparente à la lumière sur le dégradé linéaire, donc l'image doit venir en premier car elle doit être rendue sur le dégradé
Alex Guerrero

La composition d'une image et d'un dégradé via la semi-transparence doit avoir le même effet quel que soit celui qui se trouve devant. Cependant, vous pouvez toujours définir vos dégradés pour avoir une certaine transparence, mais les images qui ne sont pas déjà semi-transparentes ne peuvent pas être converties facilement / dynamiquement pour être utilisées de cette manière. C'est pourquoi je trouve l'approche de mettre le dégradé en premier plus généralement utile.
waldyrious

21

J'utilise toujours le code suivant pour le faire fonctionner. Il y a quelques notes:

  1. Si vous placez l'URL de l'image avant le dégradé, cette image sera affichée au - dessus du dégradé comme prévu.

.background-gradient {
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  background: url('http://trungk18.github.io/img/trungk18.png') no-repeat, linear-gradient(135deg, #6ec575 0, #3b8686 100%);
  height: 500px;
  width: 500px;
}
<div class="background-gradient"></div>

  1. Si vous placez le dégradé avant l'URL de l'image, cette image sera affichée sous le dégradé.

.background-gradient {
  background: -moz-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -webkit-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -o-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: -ms-linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  background: linear-gradient(135deg, #6ec575 0, #3b8686 100%), url('http://trungk18.github.io/img/trungk18.png') no-repeat;
  width: 500px;
  height: 500px;
}
<div class="background-gradient"></div>

Cette technique est la même que nous avons plusieurs images d'arrière-plan comme décrit ici


Génial! Je met ceci en gras -> Si vous placez le dégradé avant l'URL de l'image, cette image sera affichée sous le dégradé.
aldyahsn

20

ma solution:

background-image: url(IMAGE_URL); /* fallback */

background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL);

3
Cette solution fonctionne dans mon cas pour afficher des dégradés au-dessus de l'image, sinon elle sera masquée par l'image.
vizFlux

15

J'avais une implémentation où je devais pousser cette technique un peu plus loin, et je voulais décrire mon travail. Le code ci-dessous fait la même chose mais utilise SASS, Bourbon et un sprite d'image.

    @mixin sprite($position){
        @include background(url('image.png') no-repeat ($position), linear-gradient(#color1, #color2));
    }
    a.button-1{
        @include sprite(0 0);
    }
    a.button-2{
       @include sprite (0 -20px);  
    }
    a.button-2{
       @include sprite (0 -40px);  
    }

SASS et Bourbon s'occupent du code du navigateur croisé, et maintenant tout ce que j'ai à déclarer est la position du sprite par bouton. Il est facile d'étendre ce principe pour les boutons actifs et les états de survol.


5

Si vous avez d'étranges erreurs lors du téléchargement des images d'arrière-plan, utilisez le vérificateur de liens W3C: https://validator.w3.org/checklink

Voici les mixins modernes que j'utilise (crédits: PSA: n'utilisez pas de générateurs de gradient ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}?v=@{version}"); // fallback
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}?v=@{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}

4

Voici un MIXIN que j'ai créé pour gérer tout ce que les gens aimeraient utiliser:

.background-gradient-and-image (@fallback, @imgUrl, @background-position-x, @background-position-y, @startColor, @endColor) {
    background: @fallback;
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat; /* fallback */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-gradient(linear, left top, left bottom, from(@startColor) @background-position-x @background-position-y no-repeat, to(@endColor)); /* Saf4+, Chrome */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor); /* Chrome 10+, Saf5.1+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,    -moz-linear-gradient(top, @startColor, @endColor); /* FF3.6+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,     -ms-linear-gradient(top, @startColor, @endColor); /* IE10 */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,      -o-linear-gradient(top, @startColor, @endColor); /* Opera 11.10+ */
    background: url(@imgUrl) @background-position-x @background-position-y no-repeat,         linear-gradient(top, @startColor, @endColor); /* W3C */
}

Cela peut être utilisé comme ceci:

.background-gradient-and-image (#f3f3f3, "../images/backgrounds/community-background.jpg", left, top, #fafcfd, #f2f2f2);

J'espère que vous trouverez cela utile.

crédit à @Gidgidonihah pour avoir trouvé la solution initiale.


3

J'essayais de faire la même chose. Alors que la couleur d'arrière-plan et l'image d'arrière-plan existent sur des calques séparés au sein d'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 plusieurs arrière-plans, donc c'est peut-être une approche alternative.

http://articles.sitepoint.com/article/css3-border-images

MISE À JOUR: Un peu plus de recherche. Il semble que Petra Gregorova ait quelque chose qui fonctionne ici -> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html


2

Vous pouvez utiliser plusieurs arrière-plans: linear-gradient (); appels, mais essayez ceci:

Si vous voulez que les images soient complètement fusionnées là où il ne semble pas que les éléments se chargent séparément en raison de requêtes HTTP distinctes, utilisez cette technique. Ici, nous chargeons deux choses sur le même élément qui se chargent simultanément ...

Assurez-vous simplement de convertir d'abord votre image / texture png transparente 32 bits pré-rendue en chaîne base64 et de l'utiliser dans l'appel CSS d'arrière-plan (à la place de INSERTIMAGEBLOBHERE dans cet exemple).

J'ai utilisé cette technique pour fusionner une texture d'apparence de tranche et d'autres données d'image sérialisées avec une règle css de transparence / gradient linéaire rgba standard. Fonctionne mieux que la superposition de plusieurs images et le gaspillage des requêtes HTTP, ce qui est mauvais pour les mobiles. Tout est chargé côté client sans opération de fichier requise, mais augmente la taille des octets du document.

 div.imgDiv   {
      background: linear-gradient(to right bottom, white, rgba(255,255,255,0.95), rgba(255,255,255,0.95), rgba(255,255,255,0.9), rgba(255,255,255,0.9), rgba(255,255,255,0.85), rgba(255,255,255,0.8) );
      background-image: url("data:image/png;base64,INSERTIMAGEBLOBHERE");
 }

0

Si vous devez obtenir des dégradés et des images d'arrière-plan qui fonctionnent ensemble dans IE 9 (HTML 5 et HTML 4.01 Strict), ajoutez la déclaration d'attribut suivante à votre classe CSS et elle devrait faire l'affaire:

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#000000', endColorstr='#ff00ff'), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='[IMAGE_URL]', sizingMethod='crop');

Notez que vous utilisez l' filterattribut et qu'il existe deux instances de progid:[val]séparées par une virgule avant de fermer la valeur d'attribut avec un point-virgule. Voici le violon . Notez également que lorsque vous regardez le violon, le dégradé s'étend au-delà des coins arrondis. Je n'ai pas de solution pour cet autre qui n'utilise pas de coins arrondis. Notez également que lorsque vous utilisez un chemin relatif dans l'attribut src [IMAGE_URL], le chemin est relatif à la page du document et non au fichier css (voir source ).

Cet article ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) est ce qui m'a conduit à cette solution. C'est assez utile pour CSS3 spécifique à IE.


0

Je voulais faire un bouton span avec l'image d'arrière-plan, une combinaison de dégradé d'arrière-plan.

http://enjoycss.com/ a aidé à faire ma tâche de travail. Seulement, je dois supprimer certains CSS supplémentaires générés automatiquement. Mais c'est vraiment un bon site pour créer votre travail à gratter.

#nav a.link-style span {
    background: url("../images/order-now-mobile.png"), -webkit-linear-gradient(0deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), -moz-linear-gradient(90deg, rgba(190,20,27,1) 0, rgba(224,97,102,1) 51%, rgba(226,0,0,1) 100%);
    background: url("../images/order-now-mobile.png"), linear-gradient(90deg, rgba(170,31,0,1) 0, rgba(214,18,26,1) 51%, rgba(170,31,0,1) 100%);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-radius: 8px;
    border: 3px solid #b30a11;
}

0

Je résous le problème de cette façon. Je définis le dégradé en HTML et l'image de fond dans le corps

html {
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0.31, rgb(227, 227, 227)), color-stop(0.66, rgb(199, 199, 199)), color-stop(0.83, rgb(184, 184, 184)));
  background-image: -moz-linear-gradient(left bottom, rgb(227, 227, 227) 31%, rgb(199, 199, 199) 66%, rgb(184, 184, 184) 83%);
  height: 100%
}
body {
  background: url("http://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}


0

Pour ma conception réactive, ma flèche vers le bas sur le côté droit de la boîte (accordéon vertical), le pourcentage accepté comme position. Initialement, la flèche vers le bas était "position: absolue; droite: 13 px;". Avec le positionnement à 97%, cela a fonctionné comme un charme comme suit:

> background: #ffffff;
> background-image: url(PATH-TO-arrow_down.png); /*fall back - IE */
> background-position: 97% center; /*fall back - IE */
> background-repeat: no-repeat; /*fall back - IE */
> background-image: url(PATH-TO-arrow_down.png)  no-repeat  97%  center;  
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea)); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%); 
> background: url(PATH-TO-arrow_down.png) no-repeat 97% center,  -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);<br />
> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 ); 

PS Désolé, je ne sais pas comment gérer les filtres.


-1

Comme méthode sûre, vous pouvez simplement créer une image d'arrière-plan, c'est-à-dire 500x5 pixels, à votre cssutilisation:

background-img:url(bg.jpg) fixed repeat-x;
background:#<xxxxxx>;

xxxxxxcorrespond à la couleur qui correspond à la couleur du dégradé final.

Vous pouvez également corriger cela au bas de l'écran et le faire correspondre à la couleur de dégradé initiale.


1
-1 car: D'une part, "background-img" n'est pas une règle CSS valide. D'autre part, cela ne répond pas réellement à la question.
Chris Browne
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.