Kaip sujungti tuos pačius elementus fono paveikslėlius ir CSS3 gradientą?

Kaip naudoti CSS3 gradientus savo background-color ir tada pritaikyti background-image kad pritaikytumėte tam tikrą šviesą skaidrią tekstūrą?

1100
24 марта '10 в 1:30 2010-03-24 01:30 Ronaldas paprašė kovo 24 d. 10 val. 1:30 2010-03-24 01:30
@ 17 atsakymų

Keli fonai!

Http://caniuse.com/#feat=css-gradients “ naršyklės palaikymui.  Jei norite gauti gerą pranešimą apie tai, kodėl nereikia keleto naršyklės prefiksų, žr. Http://codepen.io/thebabydino/full/pjxVWp/ 

Sluoksnio sluoksnis

Pažymėtina, kad pirmasis apibrėžtas vaizdas bus viršutinis viršuje. Tokiu atveju vaizdas yra gradiento viršuje.

Norėdami gauti daugiau informacijos apie fono sluoksnius, žr. Http://www.w3.org/TR/css3-background/#layering .

TIK TIKRINTI vaizdus (deklaracijoje nėra gradientų) IE <9

IE9 ir naujesnės versijos vaizdus gali sukrauti taip pat. Tai galite naudoti, jei norite sukurti gradiento vaizdą, ty asmeniškai aš to nepadariau. Tačiau reikia pažymėti, kad naudojant tik vaizdus, ​​t. <9 ignoruos klaidos išraišką ir nerodys vaizdo. Tai neįvyksta, kai gradientas įjungtas. Jei šiuo atveju norite naudoti vieną atsarginį vaizdą, siūlau naudoti „ Paul Irish“ su sąlyginiu HTML elementu ir atsarginiu kodu:

naršyklėms, kurios ją palaiko , naudokite initial : background-position: 50%, initial; 

Taip pat galite naudoti sutrumpintą fono kopiją, tačiau tai pašalina atsarginę spalvą ir vaizdą.

1356
30 марта '10 в 19:59 2010-03-30 19:59 atsakymas pateikiamas Gidgidonihah kovo 30, 10, 19:59 2010-03-30 19:59

Jei taip pat norite nustatyti fono padėtį jūsų nuotraukai, galite naudoti:

 #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 } } 
77
24 нояб. Atsakymas pateikiamas Tamás Pap 24 lapkričio. 2012-11-24 19:02 '12, 07:02 pm 2012-11-24 19:02

Vienas dalykas, kurį reikia suprasti, yra tai, kad pirmasis apibrėžtas fono paveikslėlis yra aukščiausias įkrovos. Paskutinis nustatytas vaizdas bus mažiausias. Tai reiškia, kad norėdami gauti fono gradientą už vaizdo, jums reikės:

CSS3 gradientais 

40
01 янв. atsakymą pateikė Robert 01 Jan. 2011-01-01 02:51 '11 at 2:51 2011-01-01 02:51

galite tiesiog įrašyti:

18
21 дек. Nejmeddine Jammeli atsakymas gruodžio 21 d 2014-12-21 21:35 '14, 21:35 2014-12-21 21:35

mano sprendimas:

 background-image: url(IMAGE_URL);  background-image: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%), url(IMAGE_URL); 
13
15 марта '16 в 15:39 2016-03-15 15:39 atsakymą Shin pateikė 15 kovo 16 d. 15:39 2016-03-15 15:39

Turėjau supratimą, kad turiu šį metodą žengti dar toliau, ir norėčiau pareikšti savo darbą. Toliau pateiktas kodas daro tą patį, bet naudoja SASS, Bourbon ir vaizdo 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“ ir „Bourbon“ rūpinasi kryžminio naršyklės kodu, ir dabar viskas, ką turiu pranešti, yra sprite pozicija ant mygtuko. Šį principą lengva išplėsti aktyviems mygtukams ir orientacinėms būsenoms.

13
10 окт. atsakyti į duotus coreballs 10 spalis. 2012-10-10 20:08 '12, 08:08 val. 2012-10-10 20:08

Aš visada naudoju šį kodą, kad jis veiktų. Yra keletas pastabų:

  • Jei įvedate vaizdo URL prieš gradientą, šis vaizdas bus rodomas virš gradiento, kaip tikėtasi.

 <div class="background-gradient"></div> 
  1. Jei įstengsite gradientą prieš vaizdo URL, šis vaizdas bus rodomas žemiau gradiento.

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

Šis metodas yra toks pats, kaip čia yra keletas fono paveikslėlių .

9
04 окт. atsakymas pateikiamas trungk18 04 oct. 2016-10-04 10:21 '16 at 10:21 am 2016-10-04 10:21

Aš naudoju pavyzdį su enjoycss

2019

5
12 янв. Atsakymas pateikiamas Nedudi sausio 12 d 2014-01-12 18:24 '14 at 18:24 2014-01-12 18:24

Čia yra MIXIN, kurį sukūriau, kad galėčiau tvarkyti viską, ką norėtų naudoti žmonės:

 .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;  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));  background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -webkit-linear-gradient(top, @startColor, @endColor);  background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -moz-linear-gradient(top, @startColor, @endColor);  background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -ms-linear-gradient(top, @startColor, @endColor);  background: url(@imgUrl) @background-position-x @background-position-y no-repeat, -o-linear-gradient(top, @startColor, @endColor);  background: url(@imgUrl) @background-position-x @background-position-y no-repeat, linear-gradient(top, @startColor, @endColor);  } 

Jis gali būti naudojamas taip:

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

Tikimės, kad tai jums naudinga.

kreditas @Gidgidonihahui rasti šaltinio sprendimą.

3
11 дек. Atsakymą pateikė „ lukehillonline“ 11 d. 2013-12-11 13:33 '13, 13:33, 2013-12-11 13:33

Jei įkeldami fono paveikslėlius turite keistų klaidų, naudokite W3C nuorodos tikrintuvą: https://validator.w3.org/checklink

Štai modernūs mišiniai, kuriuos naudoju (kreditai: PSA: nenaudokite gradientų generatorių ):

 .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); } 
2
25 февр. Atsakymą pateikė Mateusz , vasario 25 d. 2017-02-25 20:18 '17 - 20:18 2017-02-25 20:18

Bandžiau daryti tą patį. Nors fono spalva ir fono vaizdas egzistuoja atskiruose sluoksniuose objekte, ty jie gali egzistuoti kartu. Atrodo, kad CSS gradientai pasirinko fono vaizdo sluoksnį.

Iš to, ką galiu pasakyti, pasienio įvaizdis, atrodo, turi daugiau paramos nei keletas fonų, todėl galbūt tai yra alternatyvus metodas.

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

Atnaujinimas: šiek tiek daugiau tyrimų. Atrodo, kad Petra Gregorova čia turi kažką → http://petragregorova.com/demos/css-gradient-and-bg-image-final.html

2
06 февр. atsakymas pateikiamas Alex 06 vasario mėn. 2011-02-06 07:20 '11 at 7:20 2011-02-06 07:20

Jei jums reikia gradientų ir fono paveikslėlių, kad galėtumėte dirbti kartu su IE 9 (HTML 5 ir HTML 4.01 Strict), pridėkite toliau nurodytą atributo deklaraciją į savo css klasę, ir tai turėtų padaryti:

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

Atminkite, kad naudojate filter atributą ir kad du progid:[val] egzemplioriai atskiriami kableliu prieš uždarant atributo reikšmę kabliataškiu. Čia smuiku . Taip pat atkreipkite dėmesį, kad pažvelgus į smuiką, gradientas viršija apvalius kampus. Neturiu kitokio pataisymo, nenaudojant suapvalintų kampų. Taip pat atkreipkite dėmesį, kad, naudojant atributą src [IMAGE_URL] santykinį kelią, kelias nurodo dokumento puslapį, o ne CSS failą (žr. Šaltinį ).

Šis straipsnis ( http://coding.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/ ) privertė mane priimti šį sprendimą. Tai labai naudinga IE specifinei CSS3.

0
24 апр. Atsakymas pateikiamas KSev 24 d. 2013-04-24 00:30 '13 - 0:30 2013-04-24 00:30

Mano atsakingas dizainas, mano rodyklė yra žemyn dešinėje >

 > background: #ffffff; > background-image: url(PATH-TO-arrow_down.png);  > background-position: 97% center;  > background-repeat: no-repeat;  > 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 Atsiprašome, aš nežinau, kaip elgtis su filtrais.

0
18 июня '15 в 15:37 2015-06-18 15:37 Atsakymas įteiktas 18 val., 15 val. 15:37 2015-06-18 15:37

Aš norėjau padaryti span mygtuką su fono paveikslėliu, fono gradiento deriniu.

http://enjoycss.com/ padėjo man užbaigti darbą. Tik turiu pašalinti kai kuriuos automatiškai generuojamus papildomus CSS. Bet tai yra tikrai gera svetainė, sukurianti jūsų darbą su įbrėžimais.

 #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
04 апр. Atsakymas, kurį pateikė Chatura Dinesh Halwatura 04 Apr 2014-04-04 18:35 '14 at 18:35 2014-04-04 18:35

Jei norite, kad vaizdai būtų visiškai sulieti, nes jis neatrodo atsisiuntęs elementų atskirai dėl atskirų HTTP užklausų, naudokite šį metodą. Čia įkeliame du dalykus tuo pačiu elementu, kuris tuo pačiu metu įkeliamas ... Tiesiog įsitikinkite, kad iš anksto apdorotą 32 bitų skaidrų png-image / tekstūrą konvertuojate į base64 eilutę ir naudokite fono vaizdo css skambutį. Šį metodą panaudojau plokščių tekstūros sujungimui su standartine rssba / css linijinio gradiento taisykle. Jis veikia geriau nei daugiasluoksnis menas ir išleidžia HTTP užklausas, kurios yra blogos mobiliesiems įrenginiams.

  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"); } 
0
16 марта '18 в 9:35 2018-03-16 09:35 atsakė Pauliui Laturui kovo 18 d. 18 val. 9:35 ; 2018-03-16 09:35

Kaip tikras būdas, galite tiesiog padaryti fono paveikslėlį, pvz., 500x5 pikselių, naudodami „ css naudojimą:

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

Kai xxxxxx atitinka spalvą, atitinkančią galutinio gradiento spalvą.

Taip pat galite ją išspręsti ekrano apačioje ir suderinti su pradine gradiento spalva.

0
16 февр. Atsakymą pateikė Epicus vasario 16 d. 2012-02-16 09:17 '12 at 9:17 2012-02-16 09:17

Tokiu būdu išsprendžiu problemą. Nustatau html gradientą ir kūno fono vaizdą

Kiti klausimai dėl etikečių arba Užduoti klausimą