Proprietatea opacity seteaza nivelul de opacitate al unui element HTML, opacity permite modificarea transparentei elementului.

- Sintaxa:
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>
Rezultat:
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" />
Rezultat:
Curs HTML si CSS

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" />
Rezultat (pozitionati mouse-ul peste imaginea de mai jos):
Curs HTML si CSS

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>
Rezultat:
Plasati mouse-ul peste aceasta caseta pentru a vedea efectul de opacitate. CSS3 opacity

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
CSS3 opacity

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (22066)
  2. Gramatica limbii engleze - Prezentare Generala (72291)
  3. Prepozitii - Prepositions (7819)
  4. HTML5 - Elemente si atribute noi in formular (1341)
  5. HTML5 - Tag-uri Noi (1020)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2613)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1259)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (827)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (807)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (744)