Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului.
opacity: X;- X - reprezinta o valoare intre 0 (complet transparent) si 1 (fara transparenta).
Exemple cu CSS opacity
1) Exemplu, un <div> cu o transparenta CSS de 40%:
<style>
#dv {
background-color:#8899fe;
width:200px;
height:100px;
opacity:0.4;
}
</style>
<div id="dv">Un continut oarecare ...</div>
Un continut oarecare ...
2) Exemplu, seteaza opacitate 50% la o imagine:
<style>
#im {
opacity:0.5;
}
</style>
<img src="css/html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im" />
3) Exemplu, efect imagine transparenta 50%, iar la mouseover 100%:
<style>
#im2 {
opacity:0.5;
}
#im2:hover {
opacity:1;
}
</style>
<img src="css/html_course.jpg" alt="Curs HTML si CSS" width="155" height="160" id="im2" />
4) Continut intr-un DIV care la mouseover este acoperit cu un alt <div> transparent (DIV-ul transparent trebuie sa fie gol, adaugat in primul, si setat cu: position:absolute;):
<style>
#trans {
display:none;
position:absolute;
top:2%;
left:2%;
width:96%;
height:95%;
background-color:#07fe08;
opacity:0.5;
}
#cnt {
position:relative;
background:#e7e8fe;
width:300px;
height:200px;
border:1px solid blue;
padding:20px;
}
#cnt:hover #trans { display:block; }
</style>
<div id="cnt">
<div id="trans"></div>
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
<img src="css/css3.jpg" alt="CSS3 opacity" width="160" height="98" />
</div>
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate.
