CSS -beeldrefleksie
In hierdie hoofstuk sal jy leer hoe om 'n beeld te reflekteer.
CSS Beeld Refleksies
Die box-reflect
eiendom word gebruik om 'n beeldrefleksie te skep.
Die waarde van die box-reflect
eiendom kan wees: below
, above
,
left
, of right
.
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
box-reflect | 4.0 -webkit- | 79.0 -webkit- | Not supported | 4.0 -webkit- | 15.0 -webkit- |
Voorbeelde
Voorbeeld
Hier wil ons die refleksie onder die prent hê:
img {
-webkit-box-reflect: below;
}
Voorbeeld
Hier wil ons die weerkaatsing aan die regterkant van die prent hê:
img {
-webkit-box-reflect: right;
}
CSS Refleksie Offset
Om die gaping tussen die beeld en die refleksie te spesifiseer, voeg die grootte van die gaping by die box-reflect
eiendom.
Voorbeeld
Hier wil ons die weerkaatsing onder die prent hê, met 'n 20px offset:
img {
-webkit-box-reflect: below 20px;
}
CSS-refleksie met gradiënt
Ons kan ook 'n vervaag-effek op die refleksie skep.
Voorbeeld
Skep 'n vervaag-effek op die refleksie:
img {
-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0),
rgba(0,0,0,0.4));
}