Tere päevast, veebiarenduse asjatundjad ja ka selle algajad. Neile, kes IT-valdkonna suundumusi või õigemini veebimoodi ei järgi, tahan pidulikult teatada, et see väljaanne teemal “Kuidas teha tööriistadega läbipaistvat css-plokki” on just teie jaoks õige tee. 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, keskendudes lahenduste ühilduvusele brauseritega, ning toon ka konkreetseid näiteid programmikoodist. Ja nüüd tööle!
Meetod 1. Antediluvian
Kui arvutid olid veel nõrgad ja “võimeid” ei arendatud, tulid arendajad läbipaistva tausta loomiseks välja oma viisiga: kasutades läbipaistvaid piksleid kordamööda värvilistega. Sel viisil loodud plokk nägi skaleerituna välja nagu malelaud, kuid tavasuuruses meenutas mingisugust läbipaistvust.
See "kark" aitab minu meelest muidugi vanemates brauserite versioonides, milles kaasaegsed lahendused ei tööta. Kuid väärib märkimist, et teksti kuvamise kvaliteet , sisse kirjutatud sellisesse , langeb järsult.
2. meetod. Ei ole segaduses
Harvadel juhtudel lahendavad arendajad probleemi poolläbipaistva pildi kasutuselevõtuga, sisestades ... juba valmis poolläbipaistva pildi! Selleks kasutatakse PNG-24 formaadis salvestatud pilte. See graafiline vorming võimaldab 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 selle tehnoloogiaga ei tööta, peate selle jaoks kirjutama skriptikoodi;
- CSS-is ei saa taustavärve muuta;
- Kui pildikuvamise funktsioon on brauseris 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 juures on objekt nähtamatu ja 1 korral kuvatakse see täielikult. Siiski on siin mõned ebameeldivad hetked.
Esiteks pärivad kõik alamelemendid läbipaistvuse. Ja see tähendab, et ka sissekirjutatud tekst “paistab” koos taustaga.
Teiseks keerab Internet Explorer uuesti nina üles ja kuni versioon 8 ei tööta sellega läbipaistmatus.
Selle probleemi lahendamiseks kasutage filter:alfa (Läbipaistmatus = väärtus).
Kaaluge 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.
Enne seda ütlesin, et RGB on üks populaarsemaid värvimudeleid, kus R vastutab kõigi punase varjundite eest, G - rohelised ja B - sinised toonid.
Css parameetri puhul vastutab muutuja A alfakanali eest, mis omakorda vastutab läbipaistvuse eest.
Viimase meetodi peamiseks eeliseks on see, et alfakanal ei mõjuta stiilikasti sees olevaid objekte.
rgba (r, g, b, a) on toetatud, kuna:
- 10 Opera versiooni;
- Internet Explorer 9;
- Safari 3.2;
- 3 Firefoxi versiooni.
Tahan märkida huvitavat fakti! Armastatud Internet Explorer 7 annab atribuudi 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, st. 88%.
See postitus on lõppenud. Liituge minu ajaveebiga ja ärge unustage kutsuda oma sõpru. Edu veebikeelte õppimisel! Headaega!
Kirjeldus
Määrab elemendi taustavärvi. Kuigi see atribuut ei päri oma ülemelemendi atribuute, kuna algväärtuseks on seatud läbipaistev, on alamelementide taustavärv sama, mis ülemelemendi taustavärv.
Süntaks
taustavärv:<цвет>| läbipaistev | pärida
Väärtused
läbipaistev Määrab läbipaistva tausta. inherit Pärib vanema väärtuse.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing eliit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Selles näites kasutatakse veebilehe elementide taustavärvi määramiseks kolme erinevat viisi. Näite tulemus on näidatud joonisel fig. üks.
Riis. 1. Rakendage taustavärvi
Objektimudel
document.getElementById("elementID ").style.backgroundColor
Brauserid
Internet Explorer kuni versioonini 7.0 ei toeta pärimisväärtust.
Taustapildi läbipaistvust (vähemalt 2016. aastal) CSS-i (sh CSS 3) kaudu otse määrata ei saa. Selle probleemi lahendamiseks on palju lahendusi.
Taustade segamine
Lihtsaim lahendus on ühendada kaks tausta (pilt ja poolläbipaistev värv). See meetod sobib, kui "läbipaistva taustapildi" all on sama tüüpi taust. see pole üldsegi läbipaistvus, vaid selle jäljendamine pildi segamisel värviga. Määrake topelttaust, mis koosneb taustapildist ja soovitud värvist alfakanaliga. Pärast seda valige sobivaim segamisrežiim ja reguleerige kompositsioon värvi alfakanaliga soovitud tulemuseni.
Taust: url("/images/img1.jpg"), rgba(255,255,255,0,9); background-blend-mode: värv;
Pseudoelemendi lisamine
Parim viis saada, mida sa tahad. Loome pseudoelemendi, kasutades pseudoklassi järel. Saadaval
#main ( asukoht: suhteline; ) #main:after ( sisu: ""; ekraan: plokk; asukoht: absoluutne; ülemine: 0; vasakul: 0; taustapilt: url(/wp-content/uploads/2010/11 /tandem.jpg); laius: 100%; kõrgus: 100%; läbipaistmatus: 0,2; z-indeks: -1; )
Tere. Nagu võib-olla teate, on taust CSS-i atribuut, mis võimaldab teil määrata taustavärvi või laadida üles pildi, mis toimib taustana. CSS3 tutvustas ka võimalust luua lineaarseid ja radiaalseid gradiente, kuid see on eraldi artikli teema. Samas tahtsin teile rääkida, kuidas css-is taustaomaduse läbipaistvust seada.
Määrake css-tausta läbipaistvus
Nii et kõik see on tehtud väga lihtsalt tänu sellisele värvisalvestusvormingule nagu rgba . Kui töötate graafiliste redaktoritega, teate ilmselt, et rgb värvirežiim dekodeeritakse järgmiselt: punase (punase), rohelise (roheline) ja sinise (sinine) osakaal. Niisiis, rgba on peaaegu sama, lisatud on veel üks parameeter - läbipaistvus. See on kirjutatud nii:
Taustavärv: rgba (173, 57, 22, 0,5)
Esiteks anname selgesõnaliselt märku, et seadistame värvi rgba-režiimis. Seejärel näitame kolme põhivärvi küllastusväärtusi vahemikus 0 kuni 255, kus 255 on kõrgeim küllastus. Neljas parameeter on meie läbipaistvus. Siin kirjutatakse väärtus 0-st üheni. 1 on täielikult läbipaistmatu element ja 0 on täielikult läbipaistev element. Seega, kui seate selle väärtuseks 0, ei ole taustavärv üldse nähtav.
Nüüd teate, kuidas määrata css-i taustaomaduse läbipaistvus. Selleks peate kasutama rgba värvirežiimi. Samuti on läbipaistmatuse omadus, kuid see kehtib kogu elemendi kui terviku kohta. See tähendab, et läbipaistmatuse rakendamisel saab tekstile rakendada ka läbipaistvust, mis muudab selle loetamatuks.
Läbipaistev taustanäide
Läbipaistva tausta eeliseid on lihtne näitega näidata. Näiteks on meil üldine lehe taust. Selline näeks plokk välja, kui sellele antaks ühtlane must värv:
Ja nüüd paneme plokile sama musta värvi, kuid määrame selle rgba värvivormingu abil, määrates viimaseks väärtuseks näiteks 0,7. See selgub järgmiselt:
Nüüd on ploki taust poolläbipaistev ja läbi selle on näha taustapilt. See pilt ja taust on vaid illustratiivsed. Nagu te mõistate, võib css-i tausta läbipaistvus olla kasulik, kui vajate pesastatud elemendi tausta, mis ei varja teistes kihtides asuvaid taustu.
Värvi ise pole rgba abil keeruline määrata. Nagu juba mainitud, tähendavad esimesed kolm tähte kolme põhivärvi: punast, rohelist ja sinist või õigemini nende osakaalu (0 kuni 255). Erinevaid väärtusi sisestades saate miljoneid erinevaid värve ning läbipaistvus võimaldab teil vajadusel saidile palju ilusaid efekte välja mõelda.
CSS kasutab läbipaistvuse atribuuti läbipaistva efekti loomiseks.
IE8 ja varasemad versioonid toetavad alternatiivset omadust - filter:alpha(opacity=x) , kus "x" võib võtta väärtuse vahemikus 0 kuni 100 , mida väiksem väärtus, seda läbipaistvam element on.
Kõik teised brauserid toetavad standardset CSS-i läbipaistmatuse atribuuti, mille väärtus võib olla vahemikus 0,0 kuni 1,0, mida väiksem on väärtus, seda läbipaistvam on element:
Proovi »Hõljutage kursorit läbipaistvus
Pseudoklass :hover võimaldab muuta elementide välimust, kui hõljutad hiirega nende kohal. Kasutame seda funktsiooni, et pilt kaotaks hõljumisel läbipaistvuse:
Proovi »Tausta läbipaistvus
Elemendi läbipaistvaks muutmiseks on kaks võimalust: ülalkirjeldatud läbipaistmatuse omadus ja RGBA taustavärvi määramine.
Võib-olla olete RGB värviesitusmudeliga juba tuttav. RGB (Red, Green, Blue – punane, roheline, sinine) – värvisüsteem, mis määrab tooni punase, rohelise ja sinise segamise teel. Näiteks teksti värvi kollaseks määramiseks võite kasutada mõnda järgmistest deklaratsioonidest.
Värv: rgb(255,255,0); värv: rgb(100%,100%,0);
RGB-ga määratud värvid erinevad meie varem kasutatud kuueteistkümnendväärtustest selle poolest, et need võimaldavad läbipaistvuse tagamiseks kasutada alfakanalit. See tähendab, et all olev kuvatakse läbi alfa-läbipaistvusega elemendi tausta.
RGBA värvideklaratsioon on süntaksilt sarnane standardsete RGB reeglitega. Muuhulgas peame aga deklareerima väärtuse RGBA-na (RGB asemel) ja määrama värviväärtuse järel täiendava kümnendkoha läbipaistvuse väärtuse vahemikus 0,0 (täiesti läbipaistev) kuni 1 (täiesti läbipaistmatu).
Värv: rgba(255,255,0,0,5); värvus: rgba(100%,100%,0,0,5);
Läbipaistmatuse omaduse ja RGBA erinevus seisneb selles, et läbipaistmatuse omadus rakendab läbipaistvust kogu elemendile, st kogu elemendi sisu muutub läbipaistvaks. Ja RGBA võimaldab teil määrata elemendi üksikute osade (näiteks ainult teksti või tausta) läbipaistvuse:
Keha ( taustapilt: url(img.jpg); ) .prim1 ( laius: 400 pikslit; veeris: 30 pikslit 50 pikslit; taustavärv: #ffffff; ääris: 1 pikslit täismust; fondi kaal: paks; läbipaistmatus: 0,5; filter : alfa(läbipaistmatus=70); /*IE8 ja varasemate versioonide jaoks*/ teksti joondamine: keskel; .prim2 (laius: 400px; veeris: 30px 50px; taustavärv: rgba(255,255,255,0,5); ääris: 1px tahke must; fondi paksus: paks; teksti joondamine: keskel; ) Proovi »
Märkus. RGBA väärtusi IE8 ja varasemad versioonid ei toeta. Varuvärvi deklareerimiseks vanematele brauseritele, mis ei toeta alfakanalite värviväärtusi, määrake see enne RGBA väärtust: background: rgb(255,255,0); taust: rgba(255,255,0,0,5);
