opacity Fonksiyonu

opacity fonksiyonu, arka plan görüntüsünün saydamlığını değiştirmeye izin verir. 100% veya 1 değeri, görüntüye orijinal saydamlığını bırakır. 0 değeri, görüntünün tamamen saydam olacağını belirtir. Bu aralıkta yer alan herhangi bir sayı, arkanın kısmi saydamlığını ayarlar. Negatif bir değer ayarlanamaz. Varsayılan değer 1'dir.

Sözdizimi

cssseçici {
  filter: opacity(sayı);
}

Örnek

Görselimize 50% saydamlık ayarlayalım:

html<div id="elem"></div>

css#elem {
  filter: opacity(50%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Şimdi saydamlığı 100% olarak ayarlayalım:

html<div id="elem"></div>

css#elem {
  filter: opacity(100%);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Örnek

Şimdi opacity fonksiyonuna 0 değerini verelim:

html<div id="elem"></div>

css#elem {
  filter: opacity(0);
  background: url("bg.png") center / cover no-repeat;
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Ayrıca Bakınız