Prosojnost elementov v CSS

Z lastnostjo opacity določimo stopnjo prosojnosti elementa. Vrednost je število od 0 do 1, kjer 0 pomeni popolnoma prosojen element, 1 pa popolnoma neprosojen element.

Lastnost opacity deluje na celoten element, torej tudi na njegovo vsebino, slike in besedilo. Kadar želimo prosojno samo ozadje, ne pa tudi besedila, je pogosto primernejša uporaba barvnega zapisa rgba().

Pomni: Lastnost opacity vpliva na celoten element. Če jo uporabimo na okvirju z besedilom, bo prosojno tudi besedilo.

Osnovna pravila

Vrednosti lastnosti opacity so med 0 in 1.
Manjša vrednost pomeni večjo prosojnost.
Prosojnost se uporabi na celotnem elementu, ne samo na ozadju.
Za prosojno ozadje z neprosojnim besedilom je pogosto primernejši zapis rgba().
Pri slikah je prosojnost pogosto uporabna za poudarek ob prehodu z miško.

Pozor: Zmanjšana prosojnost lahko hitro zmanjša berljivost besedila ali preglednost slike. Zato moramo vrednosti prosojnosti izbirati premišljeno.

Lastnost `opacity`

Najpogostejše vrednosti lastnosti opacity so:

Vrednost	Pomen
`0`	element je popolnoma prosojen
`0.4`	element je precej prosojen
`0.7`	element je delno prosojen
`1`	element ni prosojen
`initial`	lastnost dobi začetno vrednost
`inherit`	vrednost podeduje od nadrejenega elementa

Prosojnost slik

Spodnji primer primerja isto sliko brez prosojnosti in s prosojnostjo 0.4.

<div class="slika">
   <img src="../../_slike/css/roze/roza1.jpg" width="180" height="180" alt="Murka" />
   <div>Slika brez prosojnosti</div>
</div>

<div class="prosojnaSlika">
   <img src="../../_slike/css/roze/roza1.jpg" width="180" height="180" alt="Slika z prosojnostjo" />
   <div>Slika ima prosojnost 0.4</div>
</div>

.slika { float: left; width: 220px; }
.prosojnaSlika { float: right; width: 220px; }
.prosojnaSlika img { opacity: 0.4; }

Slika brez prosojnosti

Slika ima prosojnost 0.4

Prosojnost in `:hover`

Pogosta uporaba lastnosti opacity je pri galerijah, kjer so predogledne sličice nekoliko prosojne, ob prehodu z miško pa postanejo povsem vidne.

#primer2 img {
    border: 2px solid white;
    margin: 0 5px 5px 0;
    opacity: 0.4;
}

#primer2 img:hover {
    border: 2px solid #FC8E02;
    opacity: 1;
}

Kokrska kočna
Jezerska kočna
Grintovec
Skuta
Rinke

Primer v novem oknu oziroma zavihku.

Pomni: Pri slikah je pogosto smiselno, da je začetna slika nekoliko prosojna, ob prehodu z miško pa postane povsem vidna. Tako uporabniku jasno nakažemo, katera slika je trenutno poudarjena.

Besedilo v prosojnem okvirju

Ko prosojnost določimo z lastnostjo opacity, postane prosojno tudi besedilo v elementu. To je včasih zaželeno, pogosto pa ne.

<div id="primer3">
   <div class="besedilo">Lorem ipsum dolor...</div>
</div>

#primer3 {
   background: url(../../_slike/css/gore/alpe.jpg) no-repeat center center;
   background-size: cover;
}

#primer3 .besedilo {
   background-color: #333;
   opacity: 0.7;
   margin: 10px 30px;
   padding: 15px;
   color: #fff;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non pulvinar risus. Nunc euismod erat non lectus consequat accumsan. Praesent eleifend quis est quis posuere. Morbi finibus molestie vulputate. Cras at tincidunt mi.

Pozor: Če prosojnost določimo z lastnostjo opacity, besedilo ni več povsem jasno. Zato ta rešitev ni vedno najboljša, kadar je berljivost zelo pomembna.

Prosojno ozadje z `rgba()`

Če želimo prosojno samo ozadje, besedilo pa naj ostane popolnoma jasno, je boljša rešitev uporaba barve rgba().

<div id="primer4">
   <div class="besedilo-rgba">Lorem ipsum dolor...</div>
</div>

#primer4 {
   background: url(../../_slike/css/gore/alpe.jpg) no-repeat center center;
   background-size: cover;
}

#primer4 .besedilo-rgba {
   background-color: rgba(51, 51, 51, 0.7);
   margin: 10px 30px;
   padding: 15px;
   color: #fff;
}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non pulvinar risus. Nunc euismod erat non lectus consequat accumsan. Pri tej rešitvi ostane besedilo ostro in neprosojno, prosojno pa je samo ozadje.

Priporočila

Prosojnost uporabi takrat, ko želiš doseči vizualno razliko ali poudarek, ne pa kot samostojen okras brez namena.
Pri besedilu premisli, ali bo manjša prosojnost še vedno ohranila dobro berljivost.
Za prosojna ozadja z jasnim besedilom raje uporabi rgba() kot opacity.
Pri slikah lahko prosojnost učinkovito uporabiš za poudarek ob prehodu z miško.
Vrednosti prosojnosti izbiraj zmerno in premišljeno.

Pogoste napake

Predpostavlja se, da lastnost opacity vpliva samo na ozadje elementa.
Prosojnost je nastavljena tako nizko, da vsebina ni več dovolj vidna.
Za besedilo v okvirju se uporabi opacity, čeprav bi bil zaradi berljivosti primernejši rgba().
Pri učinkih ob prehodu z miško je razlika premajhna, zato uporabnik poudarka skoraj ne opazi.

Nazaj

Naprej