Kā izmantot CSS3 gradientus, lai veidotu fona fona krāsu
, un pēc tam izmantot fona attēlu
, lai piemērotu kādu vieglu caurspīdīgu tekstūru?
Vairāki foni!
body {
background: #eb01a5;
background-image: url("IMAGE_URL"); /* fallback */
background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */
}
Šīs 2 rindiņas ir rezerves variants jebkuram pārlūkam, kas nedarbojas ar gradientiem. Skatīt piezīmes par attēlu kraušanu tikai IE <9 zemāk.
Pēdējā rindiņa nosaka fona attēlu un gradientu pārlūkprogrammām, kas to spēj apstrādāt.
Gandrīz visas pašreizējās pārlūkprogrammas atbalsta vairākus fona attēlus un css fonus. Par pārlūkprogrammu atbalstu skatiet http://caniuse.com/#feat=css-gradients. Labu ierakstu par to, kāpēc jums nav nepieciešami vairāki pārlūkprogrammu prefiksi, skatiet http://codepen.io/thebabydino/full/pjxVWp/.
Slāņu kaudze
Jāatzīmē, ka pirmais definētais attēls kaudzē būs visaugstākais. Šajā gadījumā attēls ir gradienta augšpusē.
Plašāku informāciju par fona slāņošanu skatiet http://www.w3.org/TR/css3-background/#layering.
TIKAI attēlu kraušana uz kārtas (deklarācijā nav gradientu) IE < 9
IE9 un jaunākos modeļos attēlus var sakraut šādā pašā veidā. To var izmantot, lai izveidotu gradientu attēlu IE9, lai gan personīgi es to nedarītu. Tomēr jāņem vērā, ka, izmantojot tikai attēlus, ie <9 ignorēs atteikuma deklarāciju un nerādīs nekādu attēlu. Tas nenotiek, ja ir iekļauts gradients. Lai šajā gadījumā izmantotu vienu rezerves attēlu, es iesaku izmantot Paul Irish's brīnišķīgo Conditional HTML element kopā ar rezerves kodu:
.lte9 #target{ background-image: url("IMAGE_URL"); }
Fona novietojums, izmērs utt.
Citas īpašības, kas attiecas uz vienu attēlu, arī var tikt atdalītas ar komatu. Ja ir norādīta tikai 1 vērtība, tā tiks piemērota visiem sakrautajiem attēliem, ieskaitot gradientu. background-size: 40px;
ierobežos gan attēla, gan gradienta augstumu un platumu līdz 40px. Tomēr, izmantojot background-size: 40px, cover;
, attēls būs 40px, bet gradients pārklās elementu. Lai iestatījumu piemērotu tikai vienam attēlam, iestatiet noklusējuma iestatījumu otram attēlam: background-position: 50%, 0 0;
vai pārlūkprogrammās, kas to atbalsta izmantojiet paredzošais
: background-position: 50%, sākotnējais;
Varat izmantot arī fona saīsinājumu, taču tas likvidē rezerves krāsu un attēlu.
body{
background: url("IMAGE_URL") no-repeat left top, linear-gradient(#eb01a5, #d13531);
}
Tas pats attiecas uz fona-pozīciju, fona atkārtojumu utt.
Viena lieta, kas jāņem vērā, ir tā, ka pirmais definētais fona attēls kaudzē ir visaugstākais. Pēdējais definētais attēls būs apakšējais. Tas nozīmē, ka, lai aiz attēla izveidotu fona gradientu, ir nepieciešams:
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);
}
Varētu arī definēt attēlu fona pozīcijas un fona lielumu. Es izveidoju bloga ierakstu par dažām interesantām lietām, ko var darīt ar CSS3 gradientiem.
Es mēģināju darīt to pašu. Lai gan fona krāsa un fona attēls objektā pastāv atsevišķos slāņos - tas nozīmē, ka tie var pastāvēt līdzās - CSS gradienti, šķiet, pārņem fona attēla slāni.
No tā, ko es varu pateikt, šķiet, ka border-image ir plašāks atbalsts nekā vairākiem foniem, tāpēc varbūt tā ir alternatīva pieeja.
http://articles.sitepoint.com/article/css3-border-images
UPDATE: Nedaudz vairāk pētījumu. Šķiet, ka Petrai Gregorovai šeit kaut kas darbojas --> http://petragregorova.com/demos/css-gradient-and-bg-image-final.html.