Ülesanne
Tee plokielement ja kogu selle sisu poolläbipaistvaks.
Lahendus
Elemendi läbipaistvusastme muutmiseks kasutage läbipaistmatuse stiili atribuuti väärtusega 0 kuni 1, kus 0 vastab täielikule läbipaistvusele ja 1, vastupidi, objekti läbipaistvusele. See atribuut Internet Exploreris ei tööta, seega peate kasutama spetsiaalselt selle jaoks mõeldud filtrit, atribuuti, mis ei kuulu CSS-i spetsifikatsiooni alla. Näide 1 näitab, kuidas määrata kihi läbipaistvus kõigi brauserite jaoks.
Näide 1: Läbipaistev kiht
HTML5 CSS 2.1 IE Cr Op Sa Fx
Selle näite tulemus on näidatud joonisel fig. 1.
Riis. 1. Läbipaistev kiht Safari brauseris
Filtri omadus lisab läbipaistvust ainult nendele elementidele, kus on määratud vähemalt üks mõõtmetest (laius või kõrgus) või elemendile on seatud absoluutne positsioneerimine (positsioon : absoluutne ).
Pange tähele ka seda, et läbipaistvus mõjutab kogu kihi sisu, sealhulgas alamelemente, ja te ei saa nende läbipaistmatuse taset läbipaistmatuse muutmisega suurendada. Näites 1, kus kihi läbipaistmatuse väärtus on 0,7, saab kihis olev tekst sama väärtuse. Lubatud on seda madalamaks määrata, kuid tekst ei tohi ületada läbipaistvuse väärtust 0,7.
CSS3 määratleb läbipaistmatuse atribuudi leheelementidele läbipaistva efekti rakendamiseks. Selle omaduse väärtus on arv vahemikus 0,0 kuni 1,0. Nulliga võrdse väärtuse korral muutub element täiesti läbipaistvaks ja ühega võrdse väärtuse korral ei muutu see seega üldse läbipaistvaks. Atribuuti saab rakendada mis tahes leheelementidele.
Img1 ( läbipaistmatus: 0,2; ) .img2 ( läbipaistmatus: 0,5; ) .img3 ( läbipaistmatus: 1,0; )
Skripti kaudu läbipaistvuse määramiseks kasutage: object.style.opacity
Vanad Mozilla ja Firefox 0.8 kasutavad selle atribuudi jaoks oma nime: -moz-opacity Skripti kaudu läbipaistvuse määramiseks kasutage: object.style.MozOpacity
Safari 1.1, Konqueror 3.1 – ehitatud KHTML-mootorile, kasutage läbipaistvuse kontrollimiseks järgmist atribuuti: -khtml-oacity Läbipaistvuse määramiseks skripti kaudu kasutage: object.style.KhtmlOpacity
Safari kasutab alates versioonist 1.2 CSS3 läbipaistmatust, kuid Konqueror, mis on vanem kui versioon 3.1, ei toetanud enam -khtml-oacity, kuid ei toonud sisse CSS3 läbipaistmatuse tuge.
Internet Explorer, alates versioonist 5.5 ja sealhulgas Internet Explorer 7 uusim versioon, rakendab läbipaistvust läbi Alpha DirectX filtri. Väärib märkimist, et see filter kasutab läbipaistvuse väärtust vahemikus 0 kuni 100 (mitte 0,0 kuni 1,0). Samuti panen tähele, et filtrit saab rakendada ainult elemendile, mille kõrguse, laiuse või asukoha atribuudiks on seatud absoluut või writeMode väärtuseks tb-rl või sisuEditable väärtuseks on seatud true.
Näide (määrake läbipaistvus pooleks):
Img1 ( filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); )/* IE5.5+ süntaks (eelistatud) */ .img2 ( filter: alfa(paistmatus=50); ) /* IE4 süntaks */ To määrake skripti kaudu läbipaistvus, kasutage: object.style.filter = "progid:DXImageTransform.Microsoft.Alpha(parameetri string)"
W3C läbipaistvusega sarnase läbipaistvuse saavutamiseks kasutage parameetristringina väärtust „läbipaistmatus=arv vahemikus 0 kuni 100”.
Kuidas see kõigis brauserites tööle panna:
filter:progid:DXImageTransform.Microsoft.Alpha(läbipaistmatus=50); /* IE 5.5+*/ -moz-läbipaistmatus: 0,5; /* Mozilla 1.6 ja vanemad */ -khtml-läbipaistmatus: 0,5; /* Konqueror 3.1, Safari 1.1 */ läbipaistmatus: 0,5; /* CSS3 – Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */Javascript
funktsioon setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) tagastab; // Kui pole määratud ID-ga elementi või brauser ei toeta kumbagi tuntud funktsiooni läbipaistvuse kontrollimiseks if (opacityProp=="filter") // Internet Exploder 5.5+ ( nOpacity *= 100; // Kui läbipaistvus on juba määratud, siis muutke seda filtrite kogu kaudu , vastasel juhul lisage läbipaistvus läbi style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filters.alpha; oAlpha.opacity = nOpacity += "; progid:DXImageTransform.Microsoft.Alpha(opacity ="+nOpacity+")"; // Et mitte teisi filtreid üle kirjutada, kasutage "+=" ) else // Muud brauserid elem.style = nOpacity; ) funktsioon getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // CSS3-ga ühilduv (Moz 1.7+, Safari 1.2+, Opera 9) tagastab "läbipaistmatuse" else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 ja varasemad versioonid , Firefox 0.8 tagastab "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 tagastab "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ tagastab "filtri"; tagastama vale; //läbipaistvust pole)Tere päevast, veebiarenduse asjatundjad ja ka algajad. Neile, kes IT-trende, õigemini veebimoodi ei jälgi, teatan pidulikult, et see väljaanne teemal: “Kuidas teha css-tööriistadega läbipaistvat plokki” on just teile sobiv. Tõepoolest, praegusel 2016. aastal peetakse erinevate läbipaistvate objektide kasutuselevõttu võrguteenustesse stiilseks sammuks.
Seetõttu räägin selles artiklis teile kõigist olemasolevatest läbipaistvuse loomise meetoditest, alustades veevoolueelsetest lahendustest, keskendun lahenduste ühilduvusele brauseritega ja toon ka konkreetseid näiteid programmikoodist. Nüüd asume tööle!
Meetod 1. Antediluvian
Kui arvutid olid veel nõrgad ja “võimed” ei arenenud, leidsid arendajad läbipaistva tausta loomiseks oma viisi: kasutades läbipaistvaid piksleid kordamööda värvilistega. Sel viisil loodud plokk nägi skaleerituna välja nagu malelaud, kuid normaalsuuruses meenutas see mingit läbipaistvust.
See "kark" aitab minu arvates kindlasti abi brauserite vanemates versioonides, milles kaasaegsed lahendused ei tööta. Kuid väärib märkimist, et teksti kuvamise kvaliteet , sellisesse sisse kirjutatud, langeb järsult.
2. meetod. Ei viitsi
Harvadel juhtudel lahendavad arendajad poolläbipaistva pildi kasutuselevõtu probleemi, sisestades... valmis poolläbipaistva pildi! Selleks kasutatakse PNG-24 formaadis salvestatud pilte. See graafiline vorming võimaldab teil määrata 256 läbipaistvuse taset.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
See meetod ei ole aga mugav mitmel põhjusel:
- Internet Explorer 6 ei tööta selle tehnoloogiaga, peate selle jaoks kirjutama skriptikoodi;
- CSS-is ei saa taustavärve muuta;
- Kui brauseri pildikuvamise funktsioon on keelatud, siis see kaob.
3. meetod. Edutati
Levinuim ja tuntuim viis ploki läbipaistvaks muutmiseks on omadus läbipaistmatus.
Parameetri väärtus varieerub vahemikus, kus 0 korral on objekt nähtamatu ja 1 korral kuvatakse see täielikult. Siiski on ka siin ebameeldivaid hetki.
Esiteks pärivad kõik alamelemendid läbipaistvuse. See tähendab, et ka sisestatud tekst “paistab” koos taustaga.
Teiseks, Internet Explorer "keerab jälle nina üles" ja kuni versioonini 8 ei tööta sellega läbipaistmatus.
Selle probleemi lahendamiseks kasutage filter:alfa (Läbipaistmatus = väärtus).
Vaatame näidet.
| 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 |
|
Meetod 4. Kaasaegne
Tänapäeval kasutavad spetsialistid rgba (r, g, b, a) tööriista.
Varem ütlesin teile, et RGB on üks populaarsemaid värvimudeleid, kus R vastutab kõigi punaste toonide eest, G roheliste ja B sinise varjundite eest.
Css parameetri puhul vastutab A muutuja alfakanali eest, mis omakorda vastutab läbipaistvuse eest.
Viimase meetodi peamine eelis on see, et alfakanal ei mõjuta objekte, mis asuvad stiliseeritud ploki sees.
rgba(r, g, b, a) on toetatud alates:
- 10 Opera versiooni;
- Internet Explorer 9;
- Safari 3.2;
- 3 Firefoxi versiooni.
Tahaksin juhtida tähelepanu ühele huvitavale faktile! Armastatud Internet Explorer 7 annab atribuutide kombineerimisel vea taustavärv värvide nimetusega (taustavärv: kuldne). Seetõttu peaksite kasutama ainult:
taustavärv: rgba (255, 215, 0, 0,15)
Ja nüüd näide.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
Meie poest leiate igasuguseid lilli.
|
Pange tähele, et ploki tekstisisu on täielikult nähtav (100% must), samas kui taust on seatud alfakanalile 0,88, s.o. 88%.
Sellega publikatsioon lõpetatakse. Liituge minu blogiga ja ärge unustage sõpru kutsuda. Soovin teile edu veebikeelte õppimisel! Headaega!
Kirjeldus
Määrab veebilehe elemendi läbipaistvustaseme. Kui element on osaliselt või täielikult läbipaistev, kuvatakse läbi taustpilt või muud elemendid, mis asuvad poolläbipaistva objekti all.
Süntaks
läbipaistmatus: väärtus
Väärtused
Väärtus on vahemikust pärit arv. Väärtus 0 vastab elemendi täielikule läbipaistvusele ja 1, vastupidi, selle läbipaistmatusest. Murdarvud kujul 0,6 määravad läbipaistvuse. Lubatud on kirjutada numbreid ilma eesoleva nullita, nagu läbipaistmatus: .6.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
Selle näite tulemus on näidatud joonisel fig. 1.
Riis. 1. Läbipaistmatuse kasutamise tulemus
Brauserid
Firefox enne versiooni 3.5 toetab mittestandardset atribuuti -moz-oacity.
Internet Explorer kuni versioonini 9.0 kasutab läbipaistvuse muutmiseks filtreid. Selle brauseri jaoks tuleks kirjutada filter : alpha(pacity=50) , kus läbipaistmatuse parameetri väärtus võib olla vahemikus 0 kuni 100.
