Labdien, tīmekļa izstrādes speciālisti, kā arī tā iesācēji. Tiem, kas neseko līdzi IT jomas tendencēm, pareizāk sakot, web modei, vēlos svinīgi paziņot, ka šī publikācija par tēmu: “Kā ar rīkiem izveidot caurspīdīgu css bloku” 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, koncentrējoties uz risinājumu saderību ar pārlūkprogrammām, kā arī sniegšu konkrētus programmas koda piemērus. Un tagad uz darbu!
1. metode. Antediluvian
Kad vēl bija vāji datori un nebija attīstītas “spējas”, izstrādātāji izdomāja savu veidu, kā izveidot caurspīdīgu fonu: izmantojot caurspīdīgus pikseļus pēc kārtas ar krāsainiem. Šādi izveidotais bloks mērogots izskatījās pēc šaha galdiņa, bet normālā izmērā izskatījās pēc kaut kāda caurspīdīguma.
Šis, manuprāt, "kruķis", protams, palīdz vecākām pārlūkprogrammu versijām, kurās moderni risinājumi nedarbojas. Bet ir vērts atzīmēt, ka teksta displeja kvalitāte , ierakstīts tādā , strauji krīt.
2. metode. Neapjukt
Retos gadījumos izstrādātāji atrisina problēmu ar caurspīdīga attēla ieviešanu, ievietojot ... gatavu caurspīdīgu attēlu! Šim nolūkam tiek izmantoti PNG-24 formātā saglabāti attēli. Š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ēļ:
- Internet Explorer 6 nedarbojas ar šo tehnoloģiju, jums ir jāraksta tai skripta kods;
- CSS nevar mainīt fona krāsas;
- Ja attēlu parādīšanas funkcija pārlūkprogrammā 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ā parādīts. Tomēr šeit ir daži nepatīkami brīži.
Pirmkārt, visi pakārtotie elementi pārmanto caurspīdīgumu. Un tas nozīmē, ka kopā ar fonu “izspīdēs” arī ierakstītais teksts.
Otrkārt, Internet Explorer atkal paceļ degunu un līdz pat 8. versijai ar to nedarbojas necaurredzamība.
Lai atrisinātu šo problēmu, izmantojiet filtrs:alfa (Necaurredzamība = vērtība).
Apsveriet 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 |
|
4. metode. Mūsdienīgs
Mūsdienās profesionāļi izmanto rīku rgba (r, g, b, a).
Pirms tam teicu, ka RGB ir viens no populārākajiem krāsu modeļiem, kur R atbild par visiem sarkanajiem toņiem, G – zaļajiem toņiem un B – 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 veidotajā lodziņā.
rgba (r, g, b, a) tiek atbalstīts, jo:
- 10 Opera versijas;
- Internet Explorer 9;
- Safari 3.2;
- 3 Firefox versijas.
Es gribu atzīmēt interesantu faktu! Iecienītajā pārlūkprogrammā Internet Explorer 7 tiek parādīta kļūda, apvienojot īpašumu 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%.
Šis ieraksts ir beidzies. Abonējiet manu emuāru un neaizmirstiet uzaicināt savus draugus. Veiksmi tīmekļa valodu apguvē! Čau, Čau!
Apraksts
Norāda elementa fona krāsu. Lai gan šis rekvizīts nepārmanto rekvizītus no tā vecākelementa, jo sākotnējā vērtība ir iestatīta uz caurspīdīgu, pakārtoto elementu fona krāsa ir tāda pati kā vecākelementa fona krāsa.
Sintakse
fona krāsa:<цвет>| caurspīdīgs | mantot
Vērtības
caurspīdīgs Iestata caurspīdīgu fonu. mantot Pārmanto vecāku vērtību.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Šajā piemērā tiek izmantoti trīs dažādi veidi, kā iestatīt tīmekļa lapas elementu fona krāsu. Piemēra rezultāts ir parādīts attēlā. viens.
Rīsi. 1. Lietojiet fona krāsu
Objekta modelis
document.getElementById("elementID ").style.backgroundColor
Pārlūkprogrammas
Internet Explorer līdz versijai 7.0 neatbalsta mantojuma vērtību.
Nav tieša veida, kā iestatīt fona attēla caurspīdīgumu (vismaz 2016. gadam), izmantojot CSS (tostarp CSS 3). Šai problēmai ir daudz risinājumu.
Fonu sajaukšana
Vienkāršākais risinājums ir sapludināt abus fonus (attēlu un caurspīdīgu krāsu). Šī metode ir piemērota, ja zem "caurspīdīga fona attēla" ir tāda paša veida fons. tā nemaz nav caurspīdīgums, bet gan tās imitācija, sajaucot attēlu ar krāsu. Iestatiet dubultu fonu, kas sastāv no fona attēla un vajadzīgās krāsas ar alfa kanālu. Pēc tam izvēlieties piemērotāko blendēšanas režīmu un ar krāsas alfa kanālu pielāgojiet kompozīciju vēlamajam rezultātam.
Fons: url("/images/img1.jpg"), rgba(255,255,255,0,9); fona sajaukšanas režīms: krāsa;
Pseido elementa pievienošana
Labākais veids, kā iegūt to, ko vēlaties. Mēs izveidojam pseidoelementu, izmantojot pseidoklasi pēc. Pieejams
#main ( pozīcija: relatīvā; ) #galvenā:pēc ( saturs: ""; displejs: bloks; pozīcija: absolūts; augšā: 0; pa kreisi: 0; fona attēls: url(/wp-content/uploads/2010/11 /tandem.jpg); platums: 100%; augstums: 100%; necaurredzamība: 0,2; z-indekss: -1; )
Sveiki visiem. Kā jūs, iespējams, zināt, fons ir CSS īpašums, kas ļauj iestatīt fona krāsu vai augšupielādēt attēlu, kas darbojas kā fons. CSS3 arī ieviesa iespēju izveidot lineārus un radiālus gradientus, taču šī ir atsevišķa raksta tēma. Tajā pašā es gribēju jums pastāstīt, kā iestatīt caurspīdīgumu fona īpašumam css.
Iestatiet caurspīdīgumu css fonam
Tātad, tas viss tiek darīts ļoti vienkārši, pateicoties tādam krāsu ierakstīšanas formātam kā rgba . Ja strādājat ar grafiskajiem redaktoriem, jūs droši vien zināt, ka rgb krāsu režīms tiek dekodēts šādi: sarkanā (sarkanā), zaļā (zaļā) un zilā (zilā) proporcija. Tātad rgba ir gandrīz tāds pats, tikai pievienots vēl viens parametrs - caurspīdīgums. Tas ir rakstīts šādi:
Fona krāsa: rgba (173, 57, 22, 0,5)
Pirmkārt, mēs skaidri norādām, ka iestatām krāsu rgba režīmā. Pēc tam mēs norādām trīs pamatkrāsu piesātinājuma vērtības no 0 līdz 255, kur 255 ir lielākais piesātinājums. Ceturtais parametrs ir mūsu caurspīdīgums. Šeit vērtība tiek rakstīta no 0 līdz vienam. 1 ir pilnībā necaurspīdīgs elements, un 0 ir pilnībā caurspīdīgs elements. Attiecīgi, ja iestatīsiet to uz 0, tad fona krāsa vispār nebūs redzama.
Tagad jūs zināt, kā iestatīt caurspīdīgumu fona īpašumam css. Lai to izdarītu, jums jāizmanto rgba krāsu režīms. Ir arī necaurredzamības īpašība, taču tā attiecas uz visu elementu kopumā. Tas ir, piemērojot necaurredzamību, tekstam var tikt piemērots arī caurspīdīgums, kas padarīs to nelasāmu.
Caurspīdīga fona piemērs
Caurspīdīga fona priekšrocības ir viegli parādīt ar piemēru. Piemēram, mums ir vispārīgs lapas fons. Šādi bloks izskatītos, ja tam tiktu piešķirta vienkrāsaina melna krāsa:
Un tagad iestatīsim blokam tādu pašu melno krāsu, bet norādiet to, izmantojot rgba krāsu formātu, norādot pēdējo vērtību, piemēram, 0,7. Tas izrādīsies šādi:
Tagad bloka fons ir caurspīdīgs, un caur to ir redzams fona attēls. Šis attēls un fons ir paredzēti tikai ilustratīviem nolūkiem. Kā jūs saprotat, css fona caurspīdīgums var noderēt, ja nepieciešams, lai tiktu parādīts ligzdotā elementa fons, neaizsedzot citus fonus, kas atrodas citos slāņos.
Pašu krāsu nav grūti iestatīt, izmantojot rgba. Kā jau minēts, pirmie trīs burti nozīmē trīs pamatkrāsas: sarkanu, zaļu un zilu, vai drīzāk to īpatsvaru (no 0 līdz 255). Ievadot dažādas vērtības, jūs varat iegūt miljoniem dažādu krāsu, un caurspīdīgums ļaus jums vajadzības gadījumā radīt daudz skaistu vietnei efektu.
CSS izmanto necaurredzamības rekvizītu, lai izveidotu caurspīdīgu efektu.
IE8 un vecākas versijas atbalsta alternatīvu īpašību - filter:alpha(necaurredzamība=x) , kur "x" var iegūt vērtību no 0 līdz 100, jo mazāka vērtība, jo caurspīdīgāks būs elements.
Visas pārējās pārlūkprogrammas atbalsta standarta CSS necaurredzamības rekvizītu, kura vērtība var būt no 0,0 līdz 1,0, jo mazāka vērtība, jo caurspīdīgāks būs elements:
Izmēģiniet »Virziet kursoru caurspīdīgums
Pseidoklase :hover ļauj mainīt elementu izskatu, novietojot kursoru virs tiem ar peli. Mēs izmantosim šo funkciju, lai, virzot kursoru, attēls zaudētu caurspīdīgumu:
Izmēģiniet »Fona caurspīdīgums
Ir divi iespējamie veidi, kā padarīt elementu caurspīdīgu: iepriekš aprakstītais necaurredzamības rekvizīts un RGBA fona krāsas norādīšana.
Iespējams, jau esat iepazinies ar RGB krāsu attēlojuma modeli. RGB (Red, Green, Blue - red, green, blue) - krāsu sistēma, kas nosaka nokrāsu, sajaucot sarkano, zaļo un zilo. Piemēram, lai teksta krāsu iestatītu uz dzeltenu, varat izmantot jebkuru no šīm deklarācijām:
Krāsa: rgb(255,255,0); krāsa: rgb(100%,100%,0);
Ar RGB norādītās krāsas atšķirsies no iepriekš izmantotajām hex vērtībām, jo tās ļauj izmantot alfa kanālu caurspīdīgumam. Tas nozīmē, ka tas, kas atrodas apakšā, tiks parādīts elementa fonā ar alfa caurspīdīgumu.
RGBA krāsu deklarācija pēc sintakses ir līdzīga standarta RGB kārtulām. Tomēr, cita starpā, mums ir jādeklarē vērtība kā RGBA (nevis RGB) un jāiestata papildu decimālā caurspīdīguma vērtība pēc krāsas vērtības no 0,0 (pilnībā caurspīdīga) līdz 1 (pilnīgi necaurspīdīga).
Krāsa: rgba(255,255,0,0,5); krāsa: rgba(100%,100%,0,0,5);
Atšķirība starp necaurredzamības īpašību un RGBA ir tāda, ka necaurredzamības īpašība piemēro caurspīdīgumu visam elementam, t.i., viss elementa saturs kļūst caurspīdīgs. Un RGBA ļauj iestatīt caurspīdīgumu atsevišķām elementa daļām (piemēram, tikai tekstam vai fonam):
Pamatteksts (fona attēls: url(img.jpg); ) .prim1 (platums: 400 pikseļi; piemale: 30 pikseļi 50 pikseļi; fona krāsa: #ffffff; apmale: 1 pikseļi vienkrāsains melns; fonta svars: treknrakstā; necaurredzamība: 0,5; filtrs : alfa(necaurredzamība=70); /*IE8 un vecākām versijām*/ teksta līdzināšana: centrā; ) .prim2 (platums: 400 pikseļi; mala: 30 pikseļi 50 pikseļi; fona krāsa: rgba (255,255,255,0,5); apmale: 1 pikseļi cieta melns; fonta svars: treknrakstā; teksta līdzinājums: centrā; ) Izmēģiniet »
Piezīme: RGBA vērtības netiek atbalstītas IE8 un vecākās versijās. Lai deklarētu atkāpšanās krāsu vecākām pārlūkprogrammām, kas neatbalsta krāsu vērtības ar alfa kanāliem, norādiet to vispirms pirms RGBA vērtības: background: rgb(255,255,0); fons: rgba(255,255,0,0,5);
