Kā iestatīt caurspīdīgumu css - caurspīdīgs bloks. CSS necaurredzamības īpašība: caurspīdīguma kontrole

Šajā nodarbībā mēs tos aplūkosim CSSīpašības - necaurredzamība Un RGBA. Īpašums Necaurredzamība ir atbildīgs tikai par elementu caurspīdīgumu un funkciju RGBA– krāsai un caurspīdīgumam, ja norādāt alfa kanāla caurspīdīguma vērtību.

CSS caurspīdīgums Necaurredzamība

Digitālā vērtība necaurredzamība iestatīts diapazonā no 0,0 līdz 1,0, kur nulle ir pilnīga caurspīdīgums, bet viens, gluži pretēji, ir absolūta necaurredzamība. Piemēram, lai redzētu 50% caurspīdīgumu, jums jāiestata vērtība uz 0,5. Tas ir jāpatur prātā necaurredzamība izplatās uz visiem vecāka bērna elementiem. Tas nozīmē, ka arī teksts uz caurspīdīga fona būs caurspīdīgs. Un tas ir ļoti būtisks trūkums;

Ekrānuzņēmums skaidri parāda, ka melnais teksts ir kļuvis tikpat caurspīdīgs kā zilais fons.

Div(
fons: url(attēli/jūsuattēls.jpg); /* Fona attēls */
platums: 750 pikseļi;
augstums: 100 pikseļi;
piemale: auto;
}
.blue (
fons: #027av4; /* Caurspīdīga fona krāsa */
necaurredzamība: 0,3; /* Fona caurspīdīguma vērtība */
augstums: 70 pikseļi;
}
h1 (
polsterējums: 6 pikseļi;
fontu saime: Arial Black;
fonta svars: treknāks;
fonta izmērs: 50 pikseļi;
}

CSS caurspīdīgums RGBA formātā

Formāts krāsu ierakstīšanai RGBA, ir modernāka īpašuma alternatīva necaurredzamība. R (sarkans), G (zaļš), B (zils)- nozīmē: sarkans, zaļš, zils. Pēdējā vēstule A– nozīmē alfa kanālu, kas nosaka caurspīdīgumu. RGBA Atšķirībā no Necaurredzamība neietekmē bērnu elementus.

Tagad apskatīsim mūsu piemēru, izmantojot RGBA. Aizstāsim šīs rindas stilos.

Fons: 027av4; /* Fona krāsa */
necaurredzamība: 0,3; /* fona caurspīdīguma vērtība */

uz nākamo vienu rindiņu

Fons: rgba(2, 127, 212, 0,3);

Kā redzat, caurspīdīguma vērtība 0,3 abām metodēm ir vienāda.

RGBA piemēra rezultāts:

Otrais ekrānuzņēmums izskatās daudz labāk nekā pirmais.

Spēlējoties ar bloku fona caurspīdīgumu, jūs varat sasniegt interesantus efektus savā vietnē. Ir svarīgi, lai šie caurspīdīgie bloki tiktu pārklāti ar krāsainu dizainu, piemēram, fotogrāfiju. Tikai šajā gadījumā efekts būs pamanāms. Šis paņēmiens jau sen ir izmantots dizainā, pat pirms jebkura parādīšanās CSS3, tas tika ieviests tikai grafiskajās programmās.

Ja klients pieprasa, lai izkārtojums izskatās labi vecākās pārlūkprogrammas versijās Internet Explorer, pēc tam pievienojiet īpašumu filtru un neaizmirstiet komentēt, lai netiktu ietekmēts koda derīgums.

Secinājums

Formāts RGBA atbalsta visas mūsdienu pārlūkprogrammas, izņemot Internet Explorer. Ļoti svarīgi ir arī tas RGBA elastīga, tā iedarbojas tikai uz konkrētu noteiktu elementu, neietekmējot tā bērnus. Skaidrs, ka maketētājam tā ir ērtāk. Mana izvēle noteikti ir par labu formātam RGBA par saņemšanu caurspīdīgums CSS.

Lai labāk konsolidētu materiālu un lielāku skaidrību, es iesaku jums iet cauri.

Nosaka tīmekļa lapas elementa caurspīdīguma līmeni. Ja elements ir daļēji vai pilnībā caurspīdīgs, caur elementu parādās fona attēls vai citi elementi, kas atrodas zem caurspīdīgā objekta.

īsa informācija

Apzīmējumi

	Apraksts	Piemērs
<тип>	Norāda vērtības veidu.	<размер>
A && B	Vērtības ir jāizvada norādītajā secībā.	<размер> && <цвет>
A | B	Norāda, ka jums ir jāizvēlas tikai viena vērtība no piedāvātajām vērtībām (A vai B).	normāls | mazie burtiņi
A || B	Katru vērtību var izmantot neatkarīgi vai kopā ar citām jebkurā secībā.	platums || skaitīt
	Grupu vērtības.	[ raža || krusts ]
*	Atkārtojiet nulli vai vairākas reizes.	[,<время>]*
+	Atkārtojiet vienu vai vairākas reizes.	<число>+
?	Norādītais veids, vārds vai grupa nav obligāta.	ieliktnis?
(A, B)	Atkārtojiet vismaz A, bet ne vairāk kā B reizes.	<радиус>{1,4}
#	Atkārtojiet vienu vai vairākas reizes, atdalot tos ar komatiem.	<время>#

×

Vērtības

Vērtība ir skaitlis no diapazona. Vērtība 0 atbilst elementa pilnīgai caurspīdīgumam, 1, gluži pretēji, tā necaurredzamībai. Daļskaitļi formā 0,6 nosaka caurspīdīgumu. Ir atļauts rakstīt skaitļus bez nulles sākuma, piemēram, necaurredzamības: .6.

Smilšu kaste

Vinnijs Pūks vienmēr nevairījās no nedaudz atspirdzinājuma, īpaši vienpadsmitos no rīta, jo tajā laikā brokastis jau sen bija beigušās, bet pusdienas vēl nebija sākušās. Un, protams, viņš bija šausmīgi priecīgs, redzot, ka Trusis izņem krūzes un šķīvjus.

div (necaurredzamība: 1; )

Piemērs

Šī piemēra rezultāts ir parādīts attēlā. 1.

Rīsi. 1. Necaurredzamības izmantošanas rezultāts

Objekta modelis

Objekts.style.capacity

Piezīme

Firefox līdz versijai 3.5 atbalsta rekvizītu -moz-opacity.

Internet Explorer līdz versijai 9.0 izmanto filtrus, lai mainītu caurspīdīgumu šajā pārlūkprogrammā, jums ir jāieraksta filtrs : alfa(necaurredzamība=50) , kur necaurredzamības parametrs var būt no 0 līdz 100.

Specifikācija

Katra specifikācija iziet vairākus apstiprināšanas posmus.

• Ieteikums — specifikāciju ir apstiprinājusi W3C, un tā ir ieteicama kā standarts.
• Ieteikums kandidātam ( Iespējamais ieteikums) - par standartu atbildīgā grupa ir pārliecināta, ka tas atbilst saviem mērķiem, bet standarta ieviešanai nepieciešama izstrādes kopienas palīdzība.
• Ierosinātais ieteikums Ieteiktais ieteikums) - šajā posmā dokuments tiek iesniegts W3C konsultatīvajai padomei galīgai apstiprināšanai.
• Darba projekts — izstrādāta projekta versija, kas ir apspriesta un grozīta kopienas pārskatīšanai.
• Redaktora melnraksts ( Redakcijas melnraksts) - standarta uzmetuma versija pēc projekta redaktoru veiktajām izmaiņām.
• Melnraksts ( Specifikācijas projekts) - standarta pirmā uzmetuma versija.

×

Laba diena, tīmekļa izstrādes speciālisti, kā arī iesācēji. Tiem, kas neseko IT tendencēm vai drīzāk tīmekļa modei, vēlos svinīgi informēt, ka šī publikācija par tēmu: “Kā izveidot caurspīdīgu bloku ar css rīkiem” ir tieši jums. Patiešām, pašreizējā 2016. gadā dažādu caurspīdīgu objektu ieviešana tiešsaistes pakalpojumos tiek uzskatīta par stilīgu soli.

Tāpēc šajā rakstā pastāstīšu par visām esošajām caurspīdīguma veidošanas metodēm, sākot no pirmsūdens risinājumiem, pievērsīšos risinājumu savietojamībai ar pārlūkprogrammām, kā arī sniegšu konkrētus programmas koda piemērus. Tagad ķersimies pie darba!

1. metode. Antediluvian

Kad datori vēl bija vāji un "spējas" nebija attīstītas, izstrādātāji nāca klajā ar savu veidu, kā izveidot caurspīdīgu fonu: izmantojot caurspīdīgus pikseļus pēc kārtas ar krāsainiem pikseļiem. Šādi izveidotais bloks mērogots izskatījās pēc šaha galdiņa, bet normālā izmērā atgādināja kaut kādu caurspīdīgumu.

Šis, manuprāt, “kruķis” noteikti palīdz vecākām pārlūkprogrammu versijām, kurās modernie risinājumi nedarbojas. Bet ir vērts atzīmēt, ka teksta displeja kvalitāte , ierakstīts tādā, strauji krīt.

2. metode. Netraucē

Retos gadījumos izstrādātāji atrisina caurspīdīga attēla ieviešanas problēmu, ievietojot... gatavu caurspīdīgu attēlu! Šim nolūkam tiek izmantoti attēli, kas saglabāti PNG-24 formātā. Šis grafiskais formāts ļauj iestatīt 256 caurspīdīguma līmeņus.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

Tomēr šī metode nav ērta vairāku iemeslu dēļ:

1. Internet Explorer 6 nedarbojas ar šo tehnoloģiju, jums ir jāraksta skripta kods;
2. CSS nevar mainīt fona krāsas;
3. Ja pārlūkprogrammas attēlu parādīšanas funkcija ir atspējota, tā pazudīs.

3. metode. Paaugstināts

Visizplatītākais un pazīstamākais veids, kā padarīt bloku caurspīdīgu, ir īpašums necaurredzamība.

Parametra vērtība mainās diapazonā, kur pie 0 objekts ir neredzams, bet pie 1 tas ir pilnībā redzams. Tomēr arī šeit ir daži nepatīkami brīži.

Pirmkārt, visi pakārtotie elementi pārmanto caurspīdīgumu. Tas nozīmē, ka ievadītais teksts arī “spīdēs cauri” kopā ar fonu.

Otrkārt, Internet Explorer atkal “uzgriež degunu” un līdz 8. versijai ar to nedarbojas necaurredzamība.

Lai atrisinātu šo problēmu, izmantojiet filtrs:alfa (Necaurredzamība = vērtība).

Apskatīsim piemēru.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

Metode 4. Mūsdienīga

Mūsdienās profesionāļi izmanto rīku rgba (r, g, b, a).

Iepriekš jau teicu, ka RGB ir viens no populārākajiem krāsu modeļiem, kur R atbild par visiem sarkanajiem toņiem, G par zaļajiem toņiem un B par zilajiem toņiem.

Css parametra gadījumā mainīgais A ir atbildīgs par alfa kanālu, kas savukārt ir atbildīgs par caurspīdīgumu.

Pēdējās metodes galvenā priekšrocība ir tā, ka alfa kanāls neietekmē objektus, kas atrodas stilizētā bloka iekšpusē.

rgba(r, g, b, a) tiek atbalstīts, sākot no:

• Opera versija 10;
• Internet Explorer 9;
• Safari 3.2;
• 3 Firefox versijas.

Vēlos atzīmēt interesantu faktu! Iemīļotā pārlūkprogramma Internet Explorer 7, apvienojot rekvizītus, rada kļūdu fona krāsa ar krāsu nosaukumiem (fona krāsa: zelts). Tāpēc jums vajadzētu izmantot tikai:

fona krāsa: rgba (255, 215, 0, 0,15)

Un tagad piemērs.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

Mūsu veikalā jūs atradīsiet visu veidu ziedus.

Ņemiet vērā, ka bloka teksta saturs ir pilnībā redzams (100% melns), savukārt fons ir iestatīts uz alfa kanālu 0,88, t.i. 88%.

Ar to publikācija noslēdzas. Abonējiet manu emuāru un neaizmirstiet uzaicināt draugus. Es novēlu jums veiksmi tīmekļa valodu apguvē! Čau čau!

Ar cieņu, Romāns Čuešovs

Lasīt: 326 reizes

CSS caurspīdīgums - starppārlūkprogrammu risinājums - 3,6 no 5, pamatojoties uz 5 balsīm

Šajā nodarbībā aplūkosim CSS caurspīdīgumu, uzzināsim, kā piešķirt caurspīdīgumu dažādiem lapas elementiem un panākt pilnīgu saderību starp pārlūkprogrammām, t.i., šis efekts darbosies vienādi dažādās pārlūkprogrammās.

Kā iestatīt jebkura elementa caurspīdīgumu

CSS3 necaurredzamības rekvizīts ir atbildīgs par caurspīdīgu elementu izveidi, ko var lietot jebkuram elementam. Šim īpašumam ir vērtības no 0 līdz 1, kas nosaka caurspīdīguma pakāpi. Kur 0 ir pilnīga caurspīdīgums (noklusējuma vērtība visiem elementiem), bet 1 ir pilnīga necaurredzamība. Vērtības tiek rakstītas kā daļskaitļi: 0,1, 0,2, 0,3 utt.

Lietošanas piemērs:

Pārskatāmība starp pārlūkprogrammām

Ne visas pārlūkprogrammas iepriekš minēto necaurredzamības īpašību uztver un īsteno vienādi. Dažos gadījumos ir nepieciešams izmantot citu rekvizītu nosaukumu vai filtrus.

CSS3 necaurredzamības rekvizītu atbalsta šāda veida pārlūkprogrammas: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Tik labi :) tāda pārlūkprogramma kā Internet Explorer līdz pat versijai 9.0 neatbalsta necaurredzamības rekvizītu, un, lai šai pārlūkprogrammai radītu caurspīdīgumu, ir jāizmanto filtra rekvizīts un vērtība alpha(Opacity=X), kurā X ir vesels skaitlis diapazons no 0 līdz 100, kas nosaka caurspīdīguma līmeni. 0 ir pilnīgi caurspīdīgs un 100 ir pilnīgi necaurspīdīgs.

Sākot no Firefox versijas 3.5, tas atbalsta rekvizītu -moz-opacity, nevis necaurredzamību.

Pārlūkprogrammas, piemēram, Safari 1.1 un Konqueror 3.1, kas balstītas uz KHTML dzinēju, izmanto rekvizītu -khtml-necaurredzamība, lai kontrolētu caurspīdīgumu.

Kā iestatīt caurspīdīgumu CSS, lai tas visās pārlūkprogrammās izskatītos vienādi? Lai izveidotu starppārlūkprogrammu risinājumu elementu caurspīdīgumam, ir jānorāda ne tikai viens necaurredzamības rekvizīts, bet arī šāda rekvizītu kopa:

filtrs: alfa(necaurredzamība=50); /* IE caurredzamība */ -moz-caurredzamība: 0,5; /* Atbalsta Mozilla 3.5 un jaunākas versijas */ -khtml-caurredzamība: 0,5; /* Atbalsta Konqueror 3.1 un Safari 1.1 */ necaurredzamība: 0,5; /* Atbalsta visas pārējās pārlūkprogrammas */

Dažādu elementu caurspīdīgums

Apskatīsim dažus piemērus caurspīdīguma iestatīšanai dažiem lapā visbiežāk izmantotajiem elementiem.

CSS attēla caurspīdīgums.

Apskatīsim vairākas iespējas, kā izveidot caurspīdīgu attēlu. Nākamajā piemērā pirmajam attēlam caurspīdīgums nav iestatīts, otrajam attēlam ir 50%, bet trešajam ir 30%.

Rezultāts:

Pārredzamība CSS, virzot kursoru virs attēla.

Bieži vien ir nepieciešams padarīt attēlu vai jebkuru citu elementu caurspīdīgu brīdī, kad kursors atrodas virs tā. To var izdarīt, izmantojot CSS pseido-class:hover. Lai to izdarītu, mūsu attēlam ir jāpiešķir divas klases, viena parasta - tas būs attēla neaktīvais stāvoklis un otrā klase ar pseidoklasi: virziet kursoru, šeit ir jānorāda attēla caurspīdīgums šobrīd virzot kursoru.

Rezultātu var redzēt demonstrācijā.

Fona caurspīdīgums, izmantojot CSS.

Šeit ir jāatceras, ka caurspīdīgums attiecas uz visiem ligzdotajiem elementiem un tiem nevar būt lielāka caurspīdīgums nekā ligzdotajam elementam.

Kā piemēru mēs sniegsim variantu ar lapas fonu, kas izveidots, izmantojot attēlu, un bloku ar fonu, kas izveidots, izmantojot krāsu un kura caurspīdīgums ir 50%.

Koda paraugs:

Šeit ir iepriekš ievietotā koda rezultāts:

CSS caurspīdīgums pēdējā laikā ir diezgan moderns paņēmiens, kas rada grūtības ieviešanā starp pārlūkprogrammām. Joprojām nav universālas metodes, kas ļautu ieviest caurspīdīgumu visās pārlūkprogrammās. Tomēr pēdējā laikā situācija ir ievērojami uzlabojusies.

Šajā rakstā ir sniegts detalizēts apskats par esošajām pieejām, kā arī kodu piemēri un skaidrojumi, kas palīdzēs ar minimālu piepūli sasniegt vienādu rezultātu visās pārlūkprogrammās.

Viena lieta, ko vērts pieminēt, ir tāda, ka, lai gan pārredzamība pastāv jau vairākus gadus, tā nekad nav bijusi CSS standarta sastāvdaļa. Šis ir nestandarta rekvizīts, kam vajadzētu būt daļai no CSS3 specifikācijas.

Vecā pieeja

Vecākajās Firefox un Safari versijās rekvizīts ir jāizmanto šādi:

#myElement ( -khtml-necaurredzamība: .5; -moz-necaurredzamība: 0,5; )

Rekvizīts -khtml-necaurredzamība tika izmantots vecākās tīmekļa komplektu pārlūkprogrammu versijās. Šis īpašums ir novecojis un vairs nav vajadzīgs, ja vien neesat pārliecināts, ka ievērojamu daļu no jūsu vietnes trafika veido apmeklētāji, kuri izmanto Safari 1.x, kas, protams, ir maz ticams.

Nākamajā rindā tiek izmantots rekvizīts -moz-opacity, kas darbojās ļoti agrīnās Mozilla dzinēja versijās. Firefox pārtrauca to atbalstīt versijā 0.9.

CSS caurspīdīgums pārlūkprogrammās Firefox, Safari, Chrome un Opera

Lielākajai daļai mūsdienu pārlūkprogrammu ir pietiekami izmantot šādu rekvizītu:

#myElement (necaurredzamība: .7; )

Iepriekš minētajā piemērā elements ir iestatīts uz 70% necaurredzamību (30% caurspīdīgumu). Tas ir, ja mēs iestatīsim vērtību uz vienu, elements būs necaurspīdīgs, un attiecīgi, iestatot šo vērtību uz nulli, tas kļūs neredzams.

Necaurredzamības īpašība apstrādā 2 ciparus aiz komata. Tas nozīmē, ka vērtība ".01" atšķirsies no vērtības ".02", lai gan tas nav pamanāms.

CSS caurspīdīgums pārlūkprogrammai Internet Explorer

Kā parasti, Internet Explorer nav draudzīgs ar citām pārlūkprogrammām. Turklāt mums tagad ir diezgan plaši izmantotas trīs šīs pārlūkprogrammas versijas, kuru caurspīdīguma iestatījums katrā ir atšķirīgs un dažreiz prasa papildu pūles, lai iegūtu pozitīvu rezultātu.

#myElement ( filtrs: alfa(necaurredzamība=40); )

Šajā piemērā tiek izmantots filtra rekvizīts, kas darbojas 6.–8. versijā, taču versijām 6 un 7 ir viens ierobežojums: elementa rekvizīta hasLayout vērtībai ir jābūt iestatītai uz true . Šis īpašums ir pieejams tikai IE, un par to varat lasīt vairāk, piemēram, vietnē Habré.

Vēl viens veids, kā iestatīt caurspīdīgumu, izmantojot CSS IE8, ir izmantot šādu pieeju (ņemiet vērā komentārus):

#myElement ( filtrs: progid:DXImageTransform.Microsoft.Alpha(necaurredzamība=40); /* darbojas operētājsistēmās IE6, IE7 un IE8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(necaurredzamība=40)"; / * tikai IE8 */ )

Pirmā rinda darbosies visās šobrīd izmantotajās versijās, otrā – tikai IE8. Ņemiet vērā, ka otrajā rindā tiek izmantots prefikss -ms- un vērtība ir pēdiņās.

CSS caurspīdīguma iestatīšana un mainīšana, izmantojot JavaScript vai jQuery

Lai iestatītu caurspīdīgumu, varat izmantot šādu kodu:

Document.getElementById("mans elements").style.opacity = ".4"; // lielākajai daļai pārlūkprogrammu document.getElementById("myElement").style.filter = "alpha(necaurredzamība=40)"; // priekš IE

Protams, šajā gadījumā ir daudz vieglāk izmantot jQuery, turklāt tas darbosies visās pārlūkprogrammās:

$("#myElement").css((necaurredzamība: .4 )); // darbojas visās pārlūkprogrammās

Varat animēt šo īpašumu:

$("#myElement").animate(( necaurredzamība: .4 ), 1000, function() ( // Animācija ir pabeigta; šis kods darbojas visās pārlūkprogrammās. ));

RGBA funkcija

CSS3 plāno atbalstīt alfa kanālus, izmantojot rgba funkciju. Šī funkcija darbojas pārlūkprogrammās Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+. To lieto šādi:

#rgba ( fons: rgba(98, 135, 167, .4); )

Šajā gadījumā pēdējais parametrs norāda necaurredzamības līmeni.

HSLA funkcija

Līdzīgi kā iepriekšējā funkcijā, arī CSS3 ļauj iestatīt daļēji caurspīdīgu krāsu, izmantojot HSLA funkciju, kuras parametri ir Hue, Saturation, Lightness un Alpha channel.

#hsla (fons: hsla(207, 38%, 47%, .4); )

Svarīgs punkts, izmantojot funkcijas rgba un hsla, ir tas, ka caurspīdīguma iestatījums netiek piemērots pakārtotajiem elementiem, savukārt necaurredzamības rekvizīta izmantošana tiek mantota.