CSS Pildi-läbipaistvus
CSS'i saab kasutada pildi läbipaistvuse muutmiseks.
Näited
Mouseover efekt
Läbipaistev pilt
Loome läbipaistva pildi
Tavaline pilt:
Sama pilt läbipaistvalt:
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):
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>
