Site hosted by Angelfire.com: Build your free website today!

CSS Pildi-läbipaistvus

CSS

CSS'i saab kasutada pildi läbipaistvuse muutmiseks.

Näited

 red_dot.gif Mouseover efekt

 red_dot.gif Läbipaistev pilt

Loome läbipaistva pildi

Tavaline pilt:

Monarh

Sama pilt läbipaistvalt:

Monarh

Selline on läbipaistva pildi kood:

<img src="http://pyramdesign.angelfire.com
/pic/monarh_tn.bmp" 
alt="Monarh" 
width="107" height="90" 
style="opacity:0.4;
filter:alpha(opacity=40)" />

Firefox kasutab sellise pildi loomiseks omadust opacity:x. IE kasutab omadust filter:alpha(opacity=x).

Firefox'is on (opacity:x) x väärtuseks 0.0-1.0. Mida madalam väärtus, seda läbipaistvam on pilt.

IE's on (filter:alpha(opacity=x)) x väärtuseks 0-100. Mida madalam väärtus, seda läbipaistvam on pilt.

Mouseover Effekt

Liiguta hiire-kursorit üle pildi (mouseover):

Monarh Green Butterfly

Selline on mouseover pildi kood:

<img src="http://pyramdesign.angelfire.com
/pic/monarh_tn.png" style="opacity:0.4;
filter:alpha(opacity=40)"
onmouseover="this.style.
opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.
opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://pyramdesign.angelfire.com
/pic/green-butterfly_tn.png" style="
opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.
opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.
opacity=0.4;this.filters.alpha.opacity=40" />

Kood on sarnane nagu esimeses näites. Lisatud on ainult "onmouseover" ja "onmouseout" atribuudid. "Onemouseover" atribuut määrab selle, mis juhtub pildiga kui hiire-kursor sellest üle libiseb. Antud juhul pildi läbipaistvus kaob. "Onemouseout" atribuut määrab selle, et pilt muutub pärast hiire-kursori lahkumist, taas läbipaistvaks.

Firefox'is kasutatakse süntaksit: this.style.opacity=1
IE's kasutatakse süntaksit: this.filter.alpha.opacity=100

Tekst läbipaistvas kastis

See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.
See tekst on paigutatud läbipaistvasse kasti.

Selline css kood:

      <html>
    <head>
  <style type="text/css">
div.background
  {
  width: 520px;
  height: 250px;
  margin: 30px 10px;
  background: url(http://pyramdesign.angelfire.com
/pic/Queen_tn.png) repeat;
  border: 1px solid black;
  }
div.transbox
  {
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /*  IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
  </style>
    </head>
      <body>
<div class="background">
<div class="transbox">
<p>See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  See tekst on paigutatud läbipaistvasse kasti.
  </p>
    </div>
    </div>
      </body>
        </html>