See artikkel tutvustab teile mõistet, mis aitab teil mõista läbipaistmatust ja ütlen teile, kuidas seda parameetrit juhtida. Järgmisi näpunäiteid käsitletakse selles artiklis,
- Läbipaistmatus CSS-is
- Kaskaadielementidega päritud läbipaistmatus
- RGBA kaskaadielementide atribuudi seadistus
- Läbipaistmatus muutub hõljumisefektil
Elemendi tausta läbipaistmatus on kasulik funktsioon HTML-kujunduses. Läbipaistmatuse taseme (läbipaistvuse pöördvõrdelisuse) määramisega saab disainer kontrollida elemendi nähtavust atribuudi CSS läbipaistmatuse kaudu. Seda kasutatakse tavaliselt taustaseadena, kui üksteise kohal paiknevad elemendid on kaskaadis.
Selle funktsiooni kõige levinum stsenaarium on järgmine:
- Osaliselt läbipaistev taustpilt asetatakse tekstielemendi taha.
- Taustpilt on uduselt nähtav, nii et see ei domineeri ees oleva teksti üle.
- Pilt võib olla täielikult fookuses, kui kasutaja otsustab selle selgesõnaliselt näha.
Võiksite lugeda lehelt enne CSS-i läbipaistmatuse tundmaõppimist.
kahe andmeallika segamine
Põhjaliku CSS-õpetuse saamiseks külastage aadressi Edureka CSSi õpetus algajatele . Saate suurepärase heads-upi selle kohta, kuidas CSS-i kasutatakse HTML-veebidisaini täiustamiseks.
Selle artikliga CSSi läbipaistmatuse kohta edasi liikudes
Läbipaistmatus CSS-is
CSS-is on läbipaistmatus seatud arvuliseks väärtuseks vahemikus 0,0–1,0. Nullile lähemal olevad väärtused tähistavad suuremat läbipaistvust, pilt on nähtavuses väga kerge. Alustame 50% -lise läbipaistvusega pildi näitest. Vt allpool näidet 1.
Näide 1: taustpildiks on määratud pool läbipaistvus
img {läbipaistmatus: 0,5 filter: alfa (läbipaistmatus = 50) / * IE8 ja vanemate versioonide puhul * /}
Näide 1: väljund
Algne pilt (100% läbipaistmatus)
50% läbipaistmatuse seadega pilt
Ülaltoodud näites oli ainult üks element - pilt. Muude elementide saab määrata ka läbipaistmatuse parameetriga, näiteks tekst, div elemendid ja nii edasi.
Selle artikliga CSSi läbipaistmatuse kohta edasi liikudes
kuidas kirjutada tõrjemeetodit
Kaskaadielementidega päritud läbipaistmatus
Kui elemendid on üksteise peale virnastatud ja kui taustaelemendil on läbipaistmatuse säte, siis pärivad selle kõik alamelemendid. See on vaikeseade . See tähendab, et kui pildi kohale asetatakse tekstikast ja pildi läbipaistmatuse säte on 0,5, on nii pilt kui ka tekstielement nähtavad ainult osaliselt.
Vaatame järgmises näites TOM & JERRY pildi kohale asetatud lapseteksti eksemplari. Näeme 2 läbipaistmatuse vaikefekti.
.container {position: suhteline teksti joondus: keskel läbipaistmatus: 0.5} .centered {position: absoluutne ülaosa: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRY
Näide 2: Tekst pärib vanempildilt läbipaistmatust
Selle artikliga CSSi läbipaistmatuse kohta edasi liikudes
RGBA kaskaadielementide atribuudi seadistus
On veel üks viis, kuidas läbipaistmatust saab reguleerida kaskaadelementidega. Kui soovite, et alamelemendi taustelemendi läbipaistmatus ei mõjutaks, saate seda kasutada RGBA atribuudi seade .
Näide 3: RGBA sätte kasutamine
taust: rgba (76, 175, 80, 1.0) / * Pildil pole läbipaistmatust * / / * 100% läbipaistmatusega teksti roheline taust * / / * Sinise värviga teksti 100% läbipaistmatus * /
taust: rgba (76, 175, 80, 0,4) / * Pildil pole läbipaistmatust * / / * 40% läbipaistmatusega teksti roheline taust * / / * Sinist teksti ikka 100% läbipaistmatusega * /
kuidas kontrollida palindroomi javas
Pärast RGB värvikoodi tähistab atribuut ‘a’ alfa . The alfa parameeter on arv vahemikus 0,0 (täielikult läbipaistev) kuni 1,0 (täielikult läbipaistmatu).
Selle artikliga CSSi läbipaistmatuse kohta edasi liikudes
Läbipaistmatus muutub hõljumisefektil
Mõnes stsenaariumis soovivad veebidisainerid, et läbipaistmatus varieeruks sõltuvalt sellest, kas kasutaja on elemendile keskendunud või mitte. Oletame näiteks, et pildil on vaikimisi 50% läbipaistmatus. Kui kasutaja viib hiirega pildi kohale, soovime, et pilt oleks 100% läbipaistmatusega täielikult fookuses.
Näide 4 näitab, kuidas seda tehakse.
Ühised märkimist vajavad punktid:
- Läbipaistmatuse seade on alternatiiv atribuudi „visibility” kasutamisele CSS-is. Läbipaistmatuse sätte kasutamine hõlbustab aga erineva läbipaistvuse määramist, ulatudes nullist täisväärtuseni.
- Läbipaistmatus määratakse pärast hoolikat katsetamist erinevates brauserites. Kui läbipaistmatus on seatud madalatele väärtustele, võib tekst või pilt mõnikord nähtamatuks või loetamatuks muutuda.
- Läbipaistmatuse kasutamise idee on keskenduda teravalt mõnele elemendile, samal ajal kui teised taustaelemendid ei häiri kasutaja tähelepanu. Niisiis on sellised taustaelemendid seatud väiksema läbipaistmatusega.
- Internet Exploreris on IE8 ja vanemate versioonide puhul läbipaistmatus atribuut ‘filtri’ säte vahemikus 1 kuni 100. Kõigis teistes brauserites on see vahemikus 0 kuni 1.
See viib meid selle artikli lõpuni CSS-i läbipaistmatuse kohta.
Kui soovite veebiarenduse kohta lisateavet saada, vaadake järgmist autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida, kuidas luua muljetavaldavaid veebisaite HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil ning juurutada see Amazon Simple Storage Service'i (S3).
Kui olete endiselt huvitatud, kui teil on küsimusi, võite selle postitada selle blogi „Opacity In CSS“ kommentaaride jaotisesse ja võtame teiega esimesel võimalusel ühendust.