Načrtovanje in razvoj spletnih aplikacij

Prosojnost elementov v CSS

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 }
Murka
Slika brez prosojnosti
Slika murka ima prosojnost
Slika ima prosojnost 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 }
  • Kokrska kočna
    Kokrska kočna
    Kokrska kočna
  • Jezerska kočna
    Jezerska kočna
    Jezerska kočna
  • Grintovec
    Grintovec
    Grintovec
  • Skuta
    Skuta
    Skuta
  • Rinke
    Rinke
    Rinke

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; }

 

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. Proin tempor rhoncus tellus id suscipit.