opacity proprietatea controlează cât de opac este un element pe o scară de la 0,0 la 1,0. Cu cât valoarea este mai mică, cu atât elementul este mai transparent.

Puteți alege în ce măsură doriți să faceți elementul transparent. Trebuie să adăugați următoarea proprietate CSS pentru a atinge nivelurile de transparență.

Complet opac

.class-name {
  opacity: 1;
}

/* OR */

.class-name {
  opacity: 1.0;
}

Semitransparent

.class-name {
  opacity: 0.5;
}

Complet transparent

.class-name {
  opacity: 0;
}

/* OR */

.class-name {
  opacity: 0.0;
}

Alternativ, puteți utiliza rgba pentru a seta opacitatea unui element:

ad-banner
.class-name{
  background-color: rgba(0, 0, 0, .5);
}

Aceasta stabilește background-color a unui element la negru cu 50% opacitate. Ultima valoare dintr-un rgba valoarea este valoare alfa. O valoare alfa de 1 este egală cu 100% opacitate și 0,5 (sau 0,5 ca mai sus) este egală cu 50% opacitate.

Opacitatea și transparența imaginii

opacity proprietatea vă permite să faceți o imagine transparentă, scăzând cât de opacă este.

Opacity ia o valoare între 0,0 și 1,0.

1.0 este valoarea implicită pentru orice imagine. Este complet opac.

Exemplu

img {
    opacity: 0.3;
 }

Include filter: alpha(opacity=x) pentru IE8 și versiunile anterioare. X ia o valoare de la 0 la 100.

img {
   opacity: 0.3;
   filter: alpha(opacity=30);
}

Iată un exemplu de imagine setată la parametrii din exemplul de mai sus.

imagine la 30% opacitate

Poți împerechea opacity cu :hover pentru a crea un efect de mouse-over dinamic.

Exemplu:

img {
    opacity: 0.3;
    filter: alpha(opacity=30);
}
img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100);
}

Un exemplu de codare deschisă pentru a arăta o imagine transparentă care devine opacă la plimbare

Puteți crea efectul opus cu mai puțin cod, deoarece imaginea este opacitate 1.0 în mod implicit

Exemplu:

img:hover {
   opacity: 0.3;
   filter: alpha(opacity=30);
}

Iată un codepen exemplu pentru a arăta transparență la mouse-over.

Mai multe despre CSS

Foi de stil în cascadă (CSS)

CSS este un acronim pentru Cascading Style Sheets. A fost inventat pentru prima dată în 1996 și este acum o caracteristică standard a tuturor browserelor web importante.

CSS permite dezvoltatorilor să controleze aspectul paginilor web prin „stilizarea” structurii HTML a paginii respective.

Specificațiile CSS sunt menținute de World Wide Web Consortium (W3C).

Puteți construi câteva lucruri destul de uimitoare numai în CSS, cum ar fi acest CSS pur Jocul Minesweeper (care nu folosește JavaScript).