Miten asetan taustakuvan peittävyyden CSS:ssä?
Taustakuvan peittävyyden asettaminen CSS:ssä edellyttää taustakuva-ominaisuus opasiteettiominaisuuden kanssa. Säätämällä peittävyyttä säätelet taustakuvan läpinäkyvyyttä, jolloin sen takana olevat elementit näkyvät osittain läpi, mikä luo visuaalisesti kerrostetun tehosteen.
Käytämme seuraavia lähestymistapoja taustakuvan peittävyyden asettamiseen CSS:ssä:
Sisällysluettelo
1. Opacity Property -ominaisuuden käyttäminen
The Opacity-ominaisuus CSS:ssä määrittää elementin ja sen sisällön läpinäkyvyystason. Arvojen hyväksyminen välillä 0 (täysin läpinäkyvä) ja 1 (täysin läpinäkymätön) vaikuttaa koko elementtiin, mukaan lukien sen alat, mikä tekee siitä yksinkertaisen ja tehokkaan tavan hallita läpinäkyvyyttä verkkosuunnittelussa.
Syntaksi:
div { opacity: 0.5; } Esimerkki: Element-luokan CSS-tyylin peittävyysominaisuus on asetettu arvoon 0,3, mikä tekee taustakuvasta puoliläpinäkyvän. Tämä säätää taustan näkyvyyttä säilyttäen samalla tekstin luettavuuden.
HTML
> <> html> lang> => 'en'> >>> <> meta> charset> => 'UTF-8'> >>> content> => 'width=device-width, initial-scale=1.0'> >>> |
Lähtö:
Opacity-ominaisuuden käyttäminen
2. Pseudoelementtien käyttö:
Voit asettaa taustakuvan peittävyyden CSS:ssä käyttämällä pseudoelementtejä , voit soveltaa opacity-ominaisuutta suoraan pseudoelementin taustakuvaan ohjaten sen läpinäkyvyyttä elementin sisällöstä riippumatta.
Syntaksi:
selector::pseudo-element { property: value; } Esimerkki: Tässä esimerkissä taustakuvan peittävyys asetetaan käyttämällä ::ennen pseudoelementtiä . Säädä opasiteettia tarpeen mukaan. Varmista tekstin näkyvyys sijoittamalla se pseudoelementin yläpuolelle käyttämällä z-indeksiominaisuutta.
HTML
> <> html> lang> => 'en'> >>> <> meta> charset> => 'UTF-8'> >>> > content='> width> => device> -width,> > initial-scale> => 1> .0'>>> |
Lähtö:
Pseudoelementtien käyttö
