Kreiranje prosojnih slik s CSS je preprosto. Lastnost s katero določimo prosojnost elementa je opacity
, ki ima lahko vrednost od 0.0
do 1.0
. Pri tem nižja vrednost pomeni večjo prosojnost. Lastnost opacity je del CSS3 specifikacij.
Lastnost prosojnosti je podprta v vseh novejših brskalnikih, za brskalnik IE8 in starejše verzije IE pa je poterbno navesti dodatno lastnost filter:alpha(opacity=vrednost)
. Pri tem je vrednost med 0 in 100, pri čemer nižja vrednost pomeni večjo prosojnost.
Prosojnost slik
Najprej si oglejmo primer uporabe prosojnosti na sliki z uporabo CSS lastnosti opacity
. Uporabili bomo isto sliko, kjer ji bomo v drugem primeru dodali 0.4 prosojnost:
<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 murka s prosojnostjo"/>
<div>Slika ima prosojnost 0,4</div>
</div>
.slika { float: left; width:220px }
.prosojnaSlika { float:right; width:200px }
.prosojnaSlika img { opacity:0.4 }
Za primer vzemimo drugi primer galerije slik iz predhodnega zgleda, kjer bomo manjšim slikam na levi strani dodali prosojnost z vrednostjo 0.4:
#primer2 { position: relative; width: 110px }
#primer2 ul { list-style:none; padding-left:5px }
#primer2 img {
border: 2px solid white;
margin: 0 5px 5px 0
/* ---- prosojnost slike ------------------------------ */
opacity: 0.4;
}
#primer2 img:hover {
border: 2px solid #FC8E02;
background-color: transparent;
/* ---- prosojnost slike ------------------------------ */
opacity:1
}
#primer2 figure {
position: absolute;
background-color: #F7DFA3;
padding: 5px;
border: 1px dotted #FC8E02;
visibility: hidden;
color: black;
text-decoration: none;
}
#primer2 li:hover figure img {
border: none;
padding: 5px;
max-width: 550px;
/* ---- prosojnost slike ------------------------------ */
opacity:1;
}
#primer2 li:hover figure {
visibility: visible;
top: 0;
left: 100px;
}
#primer2 figcaption { color: gray; padding-left:10px }
Primer v novem oknu oz. zavihku.
Besedilo v prosojnem okvirju
Primer besedila v prosojnem okvirju z prilagodljivo sliko v ozadju:
<div id="primer3">
<div class="besedilo">Lorem ipsum dolor... </div>
<br />
</div>
#primer3 {
background: url(_slike/alpe.jpg) no-repeat center center;
background-size: cover;
}
#primer3 .besedilo {
background-color: #333;
opacity: 0.7;
margin: 30px;
padding: 15px;
color: #fff;
}