web-dev-qa-db-fra.com

Comment combiner un dégradé image de fond et CSS3 sur le même élément?

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

csscss3background-imagegradient
1172
Ronald

Plusieurs milieux!

body {
  background: #eb01a5;
  background-image: url("IMAGE_URL"); /* fallback */
  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}

Ces 2 lignes sont la solution de rechange pour tout navigateur qui ne fait pas de dégradés. Voir les notes relatives à l'empilement d'images uniquement IE <9 ci-dessous.

  • La ligne 1 définit une couleur d'arrière-plan plat.
  • 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 pouvant les gérer.

  • La ligne 3 est pour 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 post sur pourquoi 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 se trouve 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 .

Empilement d'images SEULEMENT (pas de dégradés dans la déclaration) Pour IE <9

IE9 et supérieur peuvent empiler des images de la même manière. Vous pouvez utiliser ceci pour créer une image en dégradé pour ie9, mais personnellement, je ne le ferais pas. Notez toutefois que si vous utilisez uniquement des images, <9 ignorera la déclaration de repli 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 de l’arrière-plan, dimensionnement, etc.

D'autres propriétés pouvant s'appliquer à une seule image peuvent également être séparées par des virgules. Si une seule valeur est fournie, cela sera appliqué à 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, en utilisant background-size: 40px, cover;, l'image sera 40 pixels et le dégradé couvrira l'élément. Pour appliquer un paramètre uniquement à une image, définissez la valeur par défaut pour l'autre: background-position: 50%, 0 0; ou pour les navigateurs qui le 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);
}

La même chose s'applique à background-position, background-repeat, etc.

1453
Gidgidonihah

Si vous souhaitez également définir la position de l'arrière-plan pour 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 LESS (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
    }
}
80
Tamás Pap

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é de fond derrière une image, il vous faudrait:

  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 rédigé un article de blog sur certaines choses intéressantes que vous pouvez faire avec dégradés CSS

43
Robert

vous pouvez simplement taper:

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

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);
15
Francesco Borzi

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 un 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 car nous avons plusieurs images de fond comme décrit ici

14
trungk18

J'avais une mise en œuvre 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 une image Sprite.

    @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, et tout ce que je dois déclarer, c’est la position du sprite par bouton. Il est facile d'étendre ce principe pour les boutons actifs et les états de survol.

13
coreballs

Si vous rencontrez des erreurs étranges 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: ne pas utiliser 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);
}
3
Mateusz

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 suit:

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

J'espère que vous trouvez cela utile.

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

3
lukehillonline

J'essayais de faire la même chose. Alors que la couleur et l'image d'arrière-plan existent sur des calques distincts au sein d'un objet, ce qui signifie qu'elles peuvent coexister, les dégradés CSS semblent coopter le calque image de fond.

D'après ce que je peux dire, border-image semble bénéficier d'un soutien plus large que plusieurs arrière-plans, alors c'est peut-être une approche alternative.

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

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

2
Alex

Si vous voulez que les images soient complètement fusionnées sans que les éléments se chargent séparément en raison de requêtes HTTP distinctes, utilisez cette technique. Ici, nous chargeons deux éléments sur le même élément qui se chargent simultanément ... Assurez-vous simplement de convertir votre image/texture png transparente 32 bits pré-rendue en chaîne base64 et de l’utiliser dans l’appel css background-image. J'ai utilisé cette technique pour fondre une texture d'aspect de wafer avec une règle CSS standard de transparence/dégradé linéaire rgba. Fonctionne mieux que la superposition de plusieurs illustrations et le gaspillage de requêtes HTTP, ce qui est mauvais pour les mobiles.

 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");
 }
1
Paul Latour

Si vous devez associer dégradés et images d’arrière-plan dans IE 9 (HTML 5 & HTML 4.01 Strict), ajoutez la déclaration d'attribut suivante à votre classe css.

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'attribut filter et qu'il existe deux instances de progid:[val] séparées par une virgule avant de fermer la valeur de l'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 n'utilisant pas de coins arrondis. Notez également que lorsque vous utilisez un chemin relatif dans l'attribut src [IMAGE_URL], il 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 amené à cette solution. C'est très utile pour CSS3 spécifique à IE.

0
KSev

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

http://enjoycss.com/ m'a aidé à faire mon travail. Seulement je dois enlever quelques CSS supplémentaires générés automatiquement. Mais c'est vraiment beau site construire votre travail de zéro.

#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
Chatura Dinesh Halwatura

Je résous le problème de cette façon. Je définis dégradé en HTML et 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
vander2000

Pour mon design réactif, ma flèche de sélection déroulante sur le côté droit de la boîte (accordéon vertical), pourcentage accepté en tant que position. Initialement, la flèche vers le bas était "position: absolute; right: 13px;". 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 );

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

0
mugé