CSS 4. rész - Átlátszóság

6. oldal / 9

23.6. fejezet: CSS alapismeretek – Átlátszóság

Az egyes képeknél igen fontos lehet az átlátszóság, melynek értéke 0.0 és 1.0 között lehet (a határokat is beleértve). Alapértelmezett az 1.0, amikor az elem teljes egészében (összes színnel és kontraszttal) látható.

Opacity 0.2 Opacity 0.5 Opacity 1.0

A fenti táblázatban pl. az első kép forráskódja a következő:

<img src="/htmlpelda46.jpg" alt="Erdő" width=200 style="opacity:0.2">

Példa:

img {
    opacity: 0.5;
    filter: alpha(opacity=50);
}


Teljesebb példa a következő kóddal: (htmlpelda46.html)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Language" content="hu">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
img {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
</head>
<body>

<h1>Kép átlátszóság</h1>
<p>Jelen példában az átlászóságot a :hover-rel együtt használjuk.</p>
<img src="/htmlpelda46.jpg" alt="Erdő">

</body>
</html>

Megjegyzés: a fenti kódot az Internet Explorer 8-as és előtte lévő kiadásai nem így támogatják!

A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_image_transparency.asp  
(További példákkal.)