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

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?

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.

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
    }
}

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

vous pouvez simplement taper:

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

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>

2. 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

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);

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.

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);
}

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.

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

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

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.

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;
}

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%
}

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.

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>;

Où 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.