IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

opacity - Český CSS 3 manuál

Pomocí CSS 3 vlastnosti opacity nastavujeme průhlenost HTML elementu. Element se vykreslí částečně průhledný (tzv. alfaprůhlednost) a to včetně jeho pozadí i obsahu.

Hodnoty

  • hodnota - Průhlednost udáváme jako desetinné číslo mezi 0 a 1, kde 0 je zcela průhledný element a 1 je zcela neprůhledný.
  • inherit - Zdědí vlastnost opacity z rodičovského elementu.

Ukázka

<!DOCTYPE html>
<html>
    <head>
        <style>
        body
        {
            background: url('mraky.jpg');
        }
        #kontejner
        {
            background: white;
            border: 1px solid blue;
            opacity: 0.7;
            width: 300px;
        }
    </style>
    </head>
    <body>
        <div id="kontejner">
            <p>Tento element je částečně průhledný včetně celého svého obsahu.</p>
            <img src="ptak.png" alt="Pták" />
        </div>
    </body>
</html>

Výsledek:

Průhlednost elementu v CSS - Ostatní CSS vlastnosti

Celý element je průhledný včetně textu i obrázku. Pokud bychom chtěli průhledné pouze pozadí, můžeme použít jako pozadí průhledný PNG obrázek nebo použít pro zadání barvy funkci rgba:

<!DOCTYPE html>
<html>
    <head>
        <style>
        body
        {
            background: url('mraky.jpg');
        }
        #kontejner
        {
            background: rgba(255, 255, 255, 0.7);
            border: 1px solid blue;
            width: 300px;
        }
    </style>
    </head>
    <body>
        <div id="kontejner">
            <p>Pozadí tohoto elementu je částečně průhledné.</p>
            <img src="ptak.png" alt="Pták" />
        </div>
    </body>
</html>

Výsledek:

Průhlednost pozadí elementu v CSS - Ostatní CSS vlastnosti

 

Všechny články v sekci
Ostatní CSS vlastnosti
Článek pro vás napsal David Hartinger
Avatar
David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity