2007
CSS: transparentnost elemenata
Izme??u puno njih, izdvojio sam jednu zanimljivu mogu??nost CSS-a, a to je transparentnost elemenata. Recimo da na stranici ??elite imati box u kojem ??e se nalaziti neki sadr??aj, i taj box ??elite imati transparentan, odnosno da se kroz njega vidi recimo pozadinska slika.
To mo??ete napraviti pomo??u PNG slike, ili ono što ??emo napraviti ovdje, upotrijebite CSS.
Ukoliko se odlu??ite na PNG, morati ??ete dodati jednu dodatnu skriptu koja uklanja IE6 bug vezan uz PNG. Više o tome saznajte ovdje. Opera i Firefox te IE7 nemaju problema sa time.
Na kraju vodi??a dostupan je kompletan html / css kod ovog primjera.
Izrada osnovnog box-a za sadr??aj
Za po??etak ??emo napraviti jedan obi??an box dimenzija 300px x 200px, te borderom odnosno rubom od 6px.
#box {
height: 200px;
width: 300px;
border: 6px solid #333333;
background: #FFFFFF;
}
<div id=“box“></div>
Dodavanje transparentnosti
Kako bi taj box u??inili transparentnim unutar #box klase dodati ??emo još 2 nova retka.
Postoji property opacity koji ispravno radi u Firefoxu i Operi dok za Internet Explorer treba dodati filter koji ??e to odraditi.
Da se bacimo na posao. U #box klasu dodati ??emo te dvije nove linije koje ??e biti opacity i filter.
U kona??nici bi to trebalo izgledati ovako:
#box {
height: 200px;
width: 300px;
border: 6px solid #333333;
background: #FFFFFF;
opacity: .5;
filter: alpha(opacity=50);
}
Jedan primjer na kojem je korišten css za postizanje transparentnosti:
Kompletan HTML:
<html>
<head>
<title>CSS transparentnost</title>
<style type="text/css">
<!--
body {
background: #000000;
}
#box {
height: 200px;
width: 300px;
border: 6px solid #333333;
background: #FFFFFF;
opacity: .5;
filter: alpha(opacity=50);
}
-->
</style>
</head>
<body>
<div id="box">Sadr??aj unutar box-a</div>
</body>
</html>
