E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Opacitatea si transparenta imaginilor

24.04.2009
Opacitatea si transparenta imaginilor

Acest tutorial te invata cum sa creezi imagini transparente utilizand CSS.

Total vizualizari: 11589 11589 afisari   |   Comentarii  2   |   Rating   |   (5 voturi)   |   Timp necesar: 15 min 15 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  w3schools.com  
Autor:  w3schools.com
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
1
comenteaza printeaza

Exemplul 1 - Crearea unei imagini transparente

Mai intai vei vedea cum sa creezi o imagine transparenta cu CSS.

Imaginea obisnuita:

Aceeasi imagine cu transparenta:

Uita-te la urmatorul cod:

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox foloseste proprietatea opacity:x pentru transparenta, in timp ce IE utilizeaza filter: alpha (opacity=x).

Nota: sintaxa din CSS3 pentru transparenta este opacity:x.

In Firefox ( opacity:x ), x poate fi o valoare intre 0.0 si 1.0. O valoare mai mica face imaginea mai transparenta.

In IE ( filter:alpha(opacity=x) ), x poate lua valori de la 0 la 100. La fel ca in Firefox, cu cat valoarea este mai mica, cu atat elementul este mai transparent.

Exemplul 2 - Modificarea transparentei la mouseover

Muta cursorul deasupra imaginilor de mai jos:

 

Codul sursa arata astfel:

<img src="klematis.jpg" 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="klematis2.jpg" 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" />

Poti observa ca prima linie de cod este asemanatoare cu cea din exemplul 1. In plus, apar atributele onmouseover si onmouseout. Atributul onmouseover defineste ce se va intampla atunci cand cursorul se misca deasupra imaginii. In acest caz vrem ca imaginea sa nu fie transparenta atunci cand cursorul se afla deasupra ei.

Sintaxa pentru Firefox este this.style.opacity=1, iar pentru IE - this.filters.alpha.opacity=100.

Cand mutam cursorul mouse-ului in afara imaginii, aceasta trebuie sa redevina transparenta. Acest lucru este realizat de atributul onmouseout.

Exemplul 3 - Text intr-o casuta transparenta

Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta. Exemplu de text plasat intr-o casuta transparenta.

Codul arata astfel:

<html>
<head>
<style type="text/css">
div.background
  {
  width: 450px;
  height: 300px;
  background: url(klematis.jpg) repeat;
  border: 1px solid black;
  }
div.transbox
  {
  width: 350px;
  height: 130px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  /* pentru IE */
  filter:alpha(opacity=60);
  /* standard CSS3 */
  opacity:0.6;
  }
div.transbox p
  {
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  }
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>Exemplu de text plasat intr-o casuta transparenta.
Exemplu de text plasat intr-o casuta transparenta.
Exemplu de text plasat intr-o casuta transparenta.
Exemplu de text plasat intr-o casuta transparenta.
Exemplu de text plasat intr-o casuta transparenta.
Exemplu de text plasat intr-o casuta transparenta.
</p>
</div>
</div>
</body>
</html>

Mai intai trebuie sa creezi un element div (class="background") cu o inaltime si o latime fixata, o imagine de fundal si un chenar. De asemeni, trebuie sa creezi un div mai mic (class="transbox") in interiorul primului element div. Acest div are de asemeni o latime fixata, o imagine de fundal si un chenar. Ceea ce apare in plus este ca trebuie sa faci acest div transparent.

In acest div transparent, trebuie sa adaugi text in interiorul elementului p.

Pagina:
1
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(5 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
COMENTARII (2) spune-ti parerea
e-learn , Miercuri, 06 Mai 2009
#2

Te rugam pune intrebarile legate de cod pe forum. Pentru a pastra securitatea datelor, casuta de comentarii nu iti permite sa trimiti cod html sau javascript.

Raporteaza acest comentariu ca injurios!
Raileanu , Vineri, 01 Mai 2009
#1

Cum fac si eu legatura intre opacitatea unei imagini si javascript
Sau va rog sa imi spuneti ce am gresit la sursa de mai jos.

Raporteaza acest comentariu ca injurios!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
5045
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
5000
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4845
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4820
Tutoriale scrise de beacherrosa
beacherrosa Rang utilizator beacherrosa - Incepator
4620
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
AJAX CSS Lightroom Powerpoint Fireworks RoR JSON HTML Verilog Python Illustrator XML Photoshop Gimp Vista PHP StyleSheet Bridge Fotografie Javascript Sony Vegas MySQL Word Java Action Script COREL DRAW Dreamweaver Swift 3D XHTML SEO SWF Flash Ruby on Rails Excel PSD Outlook
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software