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

Hoe gebruik ik CSS3-verlopen voor mijn background-coloren pas dan een background-imagetoe om een ​​soort lichttransparante textuur toe te passen?


Antwoord 1, autoriteit 100%

Meerdere achtergronden!

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

Antwoord 2, autoriteit 5%

Als je ook achtergrondpositievoor je afbeelding wilt instellen, dan kun je dit gebruiken:

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

of je kunt ook een MINDER mixin maken (bootstrap-stijl):

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

Antwoord 3, autoriteit 3%

Eén ding om te beseffen is dat de eerste gedefinieerde achtergrondafbeelding zich bovenaan in de stapel bevindt. De laatst gedefinieerde afbeelding zal het onderste zijn. Dat betekent dat je voor een achtergrondverloop achter een afbeelding het volgende nodig hebt:

 body {
    background-image: url("https://www.skrenta.com/images/stackoverflow.jpg"), linear-gradient(red, yellow);
    background-image: url("https://www.skrenta.com/images/stackoverflow.jpg"), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));
    background-image: url("https://www.skrenta.com/images/stackoverflow.jpg"), -moz-linear-gradient(top, red, yellow);
  }

Antwoord 4, autoriteit 2%

je zou gewoon kunnen typen:

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

Antwoord 5, autoriteit 2%

Ik gebruik altijd de volgende code om het te laten werken. Er zijn enkele opmerkingen:

  1. Als u de afbeeldings-URL vóór het verloop plaatst, wordt deze afbeelding zoals verwacht bovenhet verloop weergegeven.
.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}[email protected]{version}"); // fallback
    background: url("@{img-folder}/@{imageName}[email protected]{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}[email protected]{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%
}

Antwoord 16

Voor mijn responsieve ontwerp accepteerde mijn drop-box-pijl naar beneden aan de rechterkant van de doos (verticale accordeon), percentage als positie. Aanvankelijk was de pijl naar beneden “positie: absoluut; rechts: 13px;”. Met de 97% positionering werkte het als volgt als volgt:

> 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. Sorry, ik weet niet hoe ik met de filters moet omgaan.


Antwoord 17

Als u een verloop wilt met een enkele achtergrondafbeelding in het midden, kunt u dit met één regel code als volgt doen:

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

Antwoord 18

Ik hoop dat dit voldoende is voor meerdere browsers:

(gewijzigde basis van verloopbewerker met zwart tot transparant verticaal verloop bovenop de afbeelding)

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

Antwoord 19

Als een zekere methode kun je gewoon een achtergrondafbeelding maken van bijvoorbeeld 500×5 pixels, in je cssgebruik:

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

Waar xxxxxxovereenkomt met de kleur die overeenkomt met de uiteindelijke verloopkleur.

Je kunt dit ook aan de onderkant van het scherm aanpassen en het laten overeenkomen met de oorspronkelijke verloopkleur.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes