Hoe combineer ik een achtergrondafbeelding en CSS3-verloop op hetzelfde element?

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

<div class="background-gradient"></div>

Antwoord 6

mijn oplossing:

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

Antwoord 7

Ik had een implementatie waarbij ik deze techniek een stap verder moest brengen, en ik wilde mijn werk schetsen. De onderstaande code doet hetzelfde, maar gebruikt SASS, Bourbon en een afbeeldingssprite.

   @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 en Bourbon zorgen voor de cross-browser-code, en nu hoef ik alleen nog maar de sprite-positie per knop aan te geven. Het is gemakkelijk om dit principe uit te breiden voor de actieve knoppen en zweeftoestanden.

Antwoord 8

Als je vreemde fouten hebt bij het downloaden van achtergrondafbeeldingen, gebruik dan W3C Link checker: https://validator.w3.org/ checklink

Hier zijn moderne mixins die ik gebruik (credits: PSA: gebruik geen gradiëntgeneratoren):

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

Antwoord 9

Hier is een MIXIN die ik heb gemaakt om alles aan te kunnen dat mensen graag zouden willen gebruiken:

.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 */
}

Dit kan als volgt worden gebruikt:

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

Ik hoop dat jullie dit nuttig vinden.

met dank aan @Gidgidonihah voor het vinden van de eerste oplossing.

Antwoord 10

Ik probeerde hetzelfde te doen. Hoewel achtergrondkleur en achtergrondafbeelding op afzonderlijke lagen binnen een object bestaan ​​- wat betekent dat ze naast elkaar kunnen bestaan ​​- lijken CSS-gradiënten de achtergrondafbeeldingslaag te coöpteren.

Voor zover ik kan zien, lijkt border-image een bredere ondersteuning te hebben dan meerdere achtergronden, dus misschien is dat een alternatieve benadering.

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

UPDATE: een beetje meer onderzoek. Het lijkt erop dat Petra Gregorova hier iets aan het werk heeft –> http://petragregorova.com/demos/css-gradient-and -bg-image-final.html

Antwoord 11

Je zou meerdere achtergronden kunnen gebruiken: linear-gradient(); belt, maar probeer dit:

Als je wilt dat de afbeeldingen volledig worden samengevoegd, waarbij het niet lijkt alsof de elementen afzonderlijk worden geladen vanwege afzonderlijke HTTP-verzoeken, gebruik dan deze techniek. Hier laden we twee dingen op hetzelfde element die tegelijkertijd laden…

Zorg er wel voor dat u eerst uw vooraf gerenderde 32-bits transparante png-afbeelding/textuur naar base64-tekenreeks converteert en deze gebruikt binnen de CSS-aanroep voor achtergrondafbeeldingen (in plaats van INSERTIMAGEBLOBHERE in dit voorbeeld).

Ik heb deze techniek gebruikt om een ​​wafelachtige textuur en andere afbeeldingsgegevens samen te voegen die zijn geserialiseerd met een standaard rgba-transparantie/lineaire gradiënt-css-regel. Werkt beter dan het stapelen van meerdere kunst en het verspillen van HTTP-verzoeken, wat slecht is voor mobiel. Alles wordt aan de clientzijde geladen zonder dat er een bestandsbewerking nodig is, maar het vergroot wel de bytegrootte van het 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");
 }

Antwoord 12

Als je gradiënten en achtergrondafbeeldingen moet laten samenwerken in IE 9 (HTML 5 & HTML 4.01 Strict), voeg dan de volgende attribuutdeclaratie toe aan je css-klasse en het zou moeten lukken:

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

Merk op dat u het kenmerk filtergebruikt en dat er twee instanties zijn van progid:[val]gescheiden door een komma voordat u de kenmerkwaarde sluit met een puntkomma. Hier is de viool. Merk ook op dat wanneer je naar de viool kijkt, het verloop verder reikt dan de afgeronde hoeken. Ik heb geen oplossing voor die andere die geen afgeronde hoeken gebruikt. Merk ook op dat bij gebruik van een relatief pad in het src [IMAGE_URL]-attribuut, het pad relatief is ten opzichte van de documentpagina en niet het css-bestand (zie bron).

Dit artikel (http://coding. smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/) heeft me naar deze oplossing geleid. Het is erg handig voor IE-specifieke CSS3.

Antwoord 13

Gebruik background-blend-modeen rgbaom de achtergrondafbeelding en kleur te mengen

Dit is wat je nodig hebt:

.myblendedbg {
  background-image: url("some_image.png");
  background-color: rgba(0, 0, 0, 0.85); /* use rgba for fine adjustments */
  background-blend-mode: multiply;
}

Als u de alpha-waardevan de rgba-kleurwaarde aanpast (het is .85in het voorbeeld), kunt u de transparantie regelen .

Ook background-blend-modeheeft andere waarden waarmee je kunt spelen om echt creatieve resultaten te krijgen.

OPMERKING: background-blend-mode: color;werkt niet in Firefox, terwijl multiplyin alle moderne browsers werkt

Antwoord 14

Ik wilde een span-knop maken met een achtergrondafbeelding, een achtergrondverloopcombinatie.

http://enjoycss.com/hielp bij het uitvoeren van mijn werktaak. Alleen moet ik een aantal automatisch gegenereerde aanvullende CSS verwijderen. Maar het is echt een leuke site om je scratchwerk te bouwen.

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

Antwoord 15

Ik los het probleem op die manier op. Ik definieer Verloop in HTML en achtergrondafbeelding in de body

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("https://www.skrenta.com/images/stackoverflow.jpg");
  height: 100%
}

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

body {
  background:  url(logo.png) no-repeat fixed center center, linear-gradient(#00467f, #a5cc82) fixed;
}

   background-image: url('YOURIMAGE.JPG');
    background-image: -moz-linear-gradient(left,  rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* FF3.6-15 */
    background-image: -webkit-linear-gradient(left,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* Chrome10-25,Safari5.1-6 */
    background-image: linear-gradient(to right,  rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%),url('YOURIMAGE.JPG'); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=1 ), progid:DXImageTransform.Microsoft.AlphaImageLoader(src='YOURIMAGE.JPG', sizingMethod='crop'); /* IE6-9 */

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