CSS Stilizarea imaginilor. Imagini / Carduri Polaroid. Imagine transparentă. Proprietatea opacity.

Imagini / Carduri Polaroid (Polaroid Images / Cards)



Exemplu:

div.polaroid {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img {width: 100%}

div.container {
  text-align: center;
  padding: 10px 20px;
}

Imagine transparentă

Proprietatea opacity poate lua o valoare între 0,0 și 1,0. Cu cât valoarea este mai mică, cu atât este mai transparentă:




Notă: IE8 și versiunile anterioare folosesc filter:alpha(opacity=x). X poate lua o valoare de la 0 la 100. O valoare mai mică face ca elementul să fie mai transparent.

Exemplu:

img {
  opacity: 0.5;
  filter: alpha(opacity=50); /* Pentru IE8 și versiunile anterioare */
}