CSS Lastnost: opacity

Lastnost opacity (slo. Motnost) nastavi stopnjo motnosti za element. Raven motnosti opisuje raven prosojnosti, pri čemer 1 pomeni, da sploh ni prosojen, 0.5 je prozoren za 50% in 0 popolnoma prozoren. Ko uporabimo lastnost opacity za ozadje elementa, postanejo prosojni tudi vsi njegovi podrejeni elementi. Zaradi tega je lahko besedilo znotraj popolnega prosojnega elementa težje berljivo. Če ne želimo uporabiti motnosti za podrejene elemente, namesto tega uporabimo barvne vrednosti RGBA.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>motnost</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        p {
            display: inline-block;
            border: 2px solid grey;
            border-radius: 6px;
            padding: 10px;
            background-color: yellow;
            color: #333333;
        }
        .p1 {
            opacity: 0.1;
        }
        .p2 {
            opacity: 0.3;
        }
        .p3 {
            opacity: 0.5;
        }
        .p4 {
            opacity: 0.7;
        }
        .p5 {
            opacity: 1;
        }
    </style>
</head>
<body>
<p class="p1">Dobrodošli v CSS vadnico.</p>
<p class="p2">Dobrodošli v CSS vadnico.</p>
<p class="p3">Dobrodošli v CSS vadnico.</p>
<p class="p4">Dobrodošli v CSS vadnico.</p>
<p class="p5">Dobrodošli v CSS vadnico.</p>
</body>
</html>

REZULTAT