Kaikki mitä sinun tarvitsee tietää CSS: n peittävyydestä

Tässä artikkelissa esitellään käsite, joka auttaa sinua ymmärtämään läpinäkyvyyttä ja kertoa kuinka hallita tätä parametria. Seuraavat vihjeet käsitellään tässä artikkelissa,

skanneriluokan menetelmät java

• Opasiteetti CSS: ssä
• Peittävyys periytyy CSS-elementtien kanssa
• RGBA CSS-elementtien määritteen asetus
• Opasiteetti muuttuu leijutusvaikutuksessa

Elementin taustan peittävyys on hyödyllinen ominaisuusasetus HTML-suunnittelussa. Asettamalla läpinäkyvyyden tason (käänteinen läpinäkyvyys) suunnittelija voi hallita elementin näkyvyyttä CSS-opasiteettiominaisuuden kautta. Tätä käytetään yleensä tausta-asetuksena, kun elementit on kaskadoitu, sijoitettuna päällekkäin.

Yleisin skenaario, jossa tätä ominaisuutta käytetään, on seuraava:

• Osittain läpinäkyvä taustakuva sijoitetaan teksti-elementin taakse.
• Taustakuva on utuinen, joten se ei hallitse edessä olevaa tekstiä.
• Kuva voi tulla täysin tarkennetuksi, kun käyttäjä nimenomaisesti haluaa nähdä sen.

Haluat ehkä lukea ennen CSS: n opasiteetin oppimista.

Löydät kattavan CSS-opetusohjelman osoitteesta Edureka CSS -opastus aloittelijoille . Saat erinomaisen heads-upin tavasta, jolla CSS: ää käytetään HTML-verkkosuunnittelun täydentämiseen.

Siirtyminen tähän artikkeliin CSS: n opasiteetista

Opasiteetti CSS: ssä

CSS: ssä Opasiteetti asetetaan numeeriseksi arvoksi, joka vaihtelee välillä 0,0 - 1,0. Lähempänä nollaa olevat arvot edustavat enemmän läpinäkyvyyttä, kuvan näkyvyys on erittäin kevyt. Aloitetaan esimerkistä kuvasta, jonka läpinäkyvyys on 50%. Katso esimerkki 1 alla.

Esimerkki 1: Taustakuva asetettu puoliksi avoimuus

img {peittävyys: 0,5 suodatin: alfa (opasiteetti = 50) / * IE8: lle ja sitä vanhemmille * /}  

Esimerkki 1: Tuotos

Alkuperäinen kuva (100% peittävyys)

Kuva 50%: n opasiteettiasetuksella

Yllä olevassa esimerkissä oli vain yksi elementti - kuva. Muut elementit voidaan asettaa myös opasiteettiparametrilla, kuten teksti, div-elementit ja niin edelleen.

Siirtyminen tähän artikkeliin CSS: n opasiteetista

Peittävyys periytyy CSS-elementtien kanssa

Kun elementit on pinottu päällekkäin, jos taustaelementissä on peittävyysasetus, kaikki alielementit perivät sen. Tämä on Oletusasetus . Tämä tarkoittaa, että jos tekstiruutu asetetaan kuvan päälle ja kuvan opasiteettiasetus on 0,5, sekä kuva että teksti-elementti näkyvät vain osittain.

Otetaan seuraavassa esimerkissä TOM & JERRY -kuvan päälle sijoitettu lapsiteksti-elementti. Näemme oletusarvoisen opasiteettivaikutuksen esimerkissä 2.

.container {sijainti: suhteellinen teksti-tasaus: keskiosan peittävyys: 0,5}. keskitetty {sijainti: absoluuttinen yläosa: 50% vasemmalla: 50% muunnos: käännä (-50%, -50%) väri: sininen kirjasinkoko: 40px} } TOM & JERRY

Esimerkki 2: Teksti perii peittävyyden pääkuvasta

Siirtyminen tähän artikkeliin CSS: n opasiteetista

RGBA CSS-elementtien määritteen asetus

On toinenkin tapa, jolla peittävyyttä voidaan hallita CSS-elementeillä. Jos haluat, että lapsielementtiin ei vaikuta sen taustalohkon peittävyys, voit käyttää sitä RGBA-määritteen asetus .

Esimerkki 3: RGBA-asetuksen käyttäminen

tausta: rgba (76, 175, 80, 1.0) / * Kuvassa ei ole opasiteettiasetusta * / / * Vihreä tausta tekstille, jonka opasiteetti on 100% * / / * Sinisellä väritekstillä on 100% opasiteetti * /

tausta: rgba (76, 175, 80, 0,4) / * Kuvassa ei ole opasiteettiasetusta * / / * Vihreä tausta tekstille, jonka opasiteetti on 40% * / / * Sininen teksti näkyy edelleen 100% opasiteetilla * /

RGB-värikoodin jälkeen attribuutti ”a” tarkoittaa alfa . alfa parametri on luku välillä 0,0 (täysin läpinäkyvä) - 1,0 (täysin läpinäkymätön).

Siirtyminen tähän artikkeliin CSS: n opasiteetista

Opasiteetti muuttuu leijutusvaikutuksessa

Joissakin tilanteissa web-suunnittelijat haluavat, että peittävyys vaihtelee sen mukaan, onko käyttäjä keskittynyt elementtiin vai ei. Oletetaan esimerkiksi, että kuvan oletusarvo on 50%. Kuitenkin, kun käyttäjä vie hiiren kuvan päälle, haluamme kuvan olevan täysin tarkennettu 100% peittävyydellä.

Esimerkki 4 osoittaa, miten tämä tehdään.

Yhteisiä huomioitavia seikkoja:

• Läpinäkyvyysasetus on vaihtoehto 'visibility' -attribuutin käytölle CSS: ssä. Opasiteettiasetuksen käyttäminen helpottaa kuitenkin erilaisten läpinäkyvyysasteiden vaihtelua nollasta täyteen.
• Opasiteettitaso asetetaan huolellisen testauksen jälkeen eri selaimissa. Kun peittävyys on asetettu mataliin arvoihin, teksti tai kuva voi joskus muuttua kokonaan näkymättömäksi tai lukukelvottomaksi.
• Opasiteetin käytön ajatuksena on keskittyä terävästi joihinkin elementteihin, kun taas toiset taustaelementit eivät häiritse käyttäjän huomiota. Joten tällaiset taustaelementit asetetaan pienemmällä opasiteetilla.
• Internet Explorerissa IE8: n ja vanhempien versioiden opasiteettiominaisuus on suodatinasetus, joka vaihtelee välillä 1-100. Kaikissa muissa selaimissa se on välillä 0-1.

Tämä tuo meidät tämän Opacity In CSS -artikkelin loppuun.

Jos haluat oppia lisää verkkokehityksestä, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.

Jos olet edelleen kiinnostunut Jos sinulla on kysyttävää, voit lähettää sen tämän Opacity In CSS -blogin kommenttiosioon, ja otamme sinuun yhteyttä mahdollisimman pian.