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 ma background-color , puis appliquer une background-image d’ background-image pour appliquer une texture transparente?

    Plusieurs milieux!

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

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

    Une chose à réaliser est que la première image d’arrière-plan définie est la plus haute de la stack. 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, il vous 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 simplement taper:

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

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

      @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 prennent en charge le code inter-navigateurs, et tout ce que j’ai à 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.

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

    J’ai fait un exemple avec enjoycss

    entrer la description de l'image ici

    http://enjoycss.com/5q#background

    Dans l’Editeur de Enjoycss, vous pouvez combiner n’importe quel nombre d’arrière-plans, linéaire, répétitif-linéaire, radial, répétitif-radial, des images, des couleurs

    vous ajustez vos arrière-plans avec l’interface graphique et il génère automatiquement le code

    le code est ici http://enjoycss.com/5q/code/0/background#background

    J’essayais de faire la même chose. Alors que les couleurs de fond et les images de fond existent sur des calques distincts dans un object – ce qui signifie qu’ils peuvent coexister – les dégradés CSS semblent co-opter avec le calque 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, alors c’est peut-être une approche alternative.

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

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

    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 ça:

     .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 trouver la solution initiale.

    Si vous avez des erreurs étranges avec le téléchargement d’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); } 

    En tant que méthode sûre, vous pouvez simplement créer une image d’arrière-plan de 500×5 pixels dans votre css :

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

    xxxxxx correspond à la couleur correspondant à la couleur du dégradé final.

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

    Si vous devez obtenir des dégradés et des images d’arrière-plan fonctionnant ensemble dans IE 9 (HTML 5 et HTML 4.01 Ssortingct), ajoutez la déclaration d’atsortingbut 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’atsortingbut filter et qu’il existe deux instances de progid:[val] séparées par une virgule avant de fermer la valeur d’atsortingbut 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 correctif pour cet autre qui n’utilise pas de coins arrondis. Notez également que lorsque vous utilisez un chemin relatif dans l’atsortingbut src [IMAGE_URL], le chemin est relatif à la page du document et non au fichier css (voir la 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 très utile pour CSS3 spécifique à IE.

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

    http://enjoycss.com/ a aidé à faire mon travail. Seulement je dois supprimer des CSS supplémentaires générés automatiquement. Mais c’est vraiment sympa de construire votre travail de scratch.

     #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 mon design responsive, ma flèche déroulante sur le côté droit de la boîte (accordéon vertical), accepte le pourcentage comme position. Initialement, la flèche vers le bas était “position: absolue; droite: 13px;”. Avec le positionnement à 97%, cela a fonctionné comme du 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%);
    > filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );

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

    Si vous voulez que les images soient complètement fusionnées et qu’elles ne ressemblent pas aux éléments, chargez-les séparément à cause de requêtes HTTP distinctes, alors utilisez cette technique. Ici, nous chargeons deux choses sur le même élément qui se chargent simultanément … Assurez-vous d’abord de convertir votre image / texture png transparente 32 bits pré-rendue en base64 et de l’utiliser dans l’appel css d’arrière-plan. J’ai utilisé cette technique pour fusionner une texture d’apparence de plaquette avec une règle standard de transparence RVB / dégradé linéaire css. Fonctionne mieux que de superposer plusieurs œuvres d’art et de gaspiller des requêtes HTTP, ce qui est mauvais pour le mobile.

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