Kõik, mida peate teadma CSS-i läbipaistmatuse kohta



See artikkel tutvustab teile kontseptsiooni, mis aitab teil mõista CSS-i läbipaistmatust ja ütleb teile, kuidas seda parameetrit juhtida.

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,

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 * /} Väljund - läbipaistmatus CSS-is - Edureka 

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.