Vysvetlenie vlastností nepriehľadnosti CSS a nepriehľadnosti obrázkov

Tieto opacityvlastnosť určuje, ako Výplň prvok na škále od 0,0 do 1,0. Čím je hodnota nižšia, tým je prvok transparentnejší.

Môžete si zvoliť, do akej miery chcete, aby bol prvok priehľadný. Aby ste dosiahli úrovne transparentnosti, musíte pridať nasledujúcu vlastnosť CSS.

Plne nepriehľadné

.class-name { opacity: 1; } /* OR */ .class-name { opacity: 1.0; }

Polopriehľadný

.class-name { opacity: 0.5; }

Plne priehľadný

.class-name { opacity: 0; } /* OR */ .class-name { opacity: 0.0; }

Prípadne môžete použiť rgbana nastavenie nepriehľadnosti prvku:

.class-name{ background-color: rgba(0, 0, 0, .5); }

Týmto background-colorsa prvok nastaví na čierny s 50% krytím. Posledná hodnota v rgbahodnote je hodnota alfa . Alfa hodnota 1 sa rovná 100% opacite a 0,5 (alebo 0,5 ako vyššie) sa rovná 50% opacite.

Nepriehľadnosť a priehľadnosť obrazu

Táto opacityvlastnosť vám umožní urobiť obrázok priehľadným znížením jeho nepriehľadnosti.

Opacity má hodnotu medzi 0,0 a 1,0.

1.0 je predvolená hodnota pre akýkoľvek obrázok. Je to úplne nepriehľadné.

Príklad

img { opacity: 0.3; }

Zahrnúť filter: alpha(opacity=x)pre IE8 a staršie. Hodnota x nadobúda hodnotu od 0 do 100.

img { opacity: 0.3; filter: alpha(opacity=30); }

Tu je príklad obrázka nastaveného na parametre vo vyššie uvedenom príklade.

obrázok pri 30% nepriehľadnosti

Môžete spárovať opacitys :hoverfotoaparátom a vytvoriť tak dynamický efekt myši.

Príklad:

img { opacity: 0.3; filter: alpha(opacity=30); } img:hover { opacity: 1.0; filter: alpha(opacity=100); }

Príklad v codepene na zobrazenie priehľadného obrázka, ktorý sa pri prechode kurzorom stáva nepriehľadným

Môžete vytvoriť opačný efekt s menším počtom kódov, pretože obrázok má v predvolenom nastavení nepriehľadnosť 1,0

Príklad:

img:hover { opacity: 0.3; filter: alpha(opacity=30); }

Tu je príklad codepen, ktorý ukazuje transparentnosť pri prejdení myšou.

Viac o CSS

Kaskádové štýly (CSS)

CSS je skratka pre kaskádové štýly. Prvýkrát bol vynájdený v roku 1996 a je teraz štandardnou súčasťou všetkých hlavných webových prehľadávačov.

CSS umožňuje vývojárom ovládať, ako vyzerajú webové stránky, a to „upravením“ štruktúry HTML tejto stránky.

Špecifikácie CSS udržuje World Wide Web Consortium (W3C).

Samotné CSS môžete vytvoriť niekoľko úžasných vecí, napríklad túto hru Minesweeper zameranú na čistý CSS (ktorá nepoužíva žiadny JavaScript).