CSS Matiyesizlik/Şeffaflık

opacity özellik, öğenin matiyesizliğini/şeffaflığını belirtir.

şeffaf resim

opacity özellik değer aralığı 0.0-1.0 arasındadır. Değer ne kadar düşükse, o kadar şeffaftır:

coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

örnek

img {
  opacity: 0.5;
}

Kişisel olarak deneyin

şeffaf fare tutma etkisi

opacity özellikler genellikle :hover seçici birlikte kullanıldığında, fareyi tutarken matiyesizliği değiştirebiliriz:

Tulip
Tulip
Flower

örnek

img {
  opacity: 0.5;
}
img:hover {
  opacity: 1.0;
}

Kişisel olarak deneyin

Örnek açıklaması

İlk CSS bloğu Örnek 1'deki kod gibi. Ayrıca, kullanıcı bir resmin üzerinde fareyi tuttuğunda etkisi ekledik. Bu durumda, kullanıcı resmin üzerinde fareyi tuttuğunda resmin şeffaf olmasını istiyoruz. Bu CSS şu şekilde: opacity:1;.

Fare işaretçisi resimden ayrıldığında, resim tekrar şeffaflaacak.

Ters tıklama etkisinin örneği:

Tulip
Tulip
Flower

örnek

img:hover {
  opacity: 0.5;
}

Kişisel olarak deneyin

Şeffaf çerçeve

Kullanım: opacity Bir elementin arka planına şeffaflık eklerken, tüm alt öğeler aynı şeffaflığı miras alır. Bu, tamamen şeffaf bir element içindeki metni okumayı zorlaştırabilir:

opacity 1
opacity 0.6
opacity 0.3
opacity 0.1

örnek

div {
  opacity: 0.3;
}

Kişisel olarak deneyin

RGBA şeffaflığı kullanma

Eğer alt öğelere şeffaflık uygulamak istemiyorsanız, yukarıdaki örnekte olduğu gibi, RGBA renk değerlerini kullanın. Aşağıdaki örnekte arka plan rengi yerine metnin şeffaflığını ayarlıyoruz:

100% şeffaflık
60% şeffaflık
30% şeffaflık
10% şeffaflık

Sizin bizim CSS Renkleri Bu bölümde RGB'yi renk değerleri olarak kullanmanın hakkında daha fazla bilgi öğrendik. RGB dışında, RGB renk değerlerini alpha kanalı (RGBA) ile birlikte kullanabilirsiniz - bu kanal renkinin şeffaflığını belirler.

RGBA renk değerleri belirtilirken: rgba(kırmızı, yeşil, mavi, alfa) alfa parametreler 0.0 (tamamen şeffaf) ve 1.0 (tamamen mat) arasında sayısal değerlerdir.

İpucu:Sizin bizim CSS Renkleri Bu bölümde RGBA renklerinin hakkında daha fazla bilgi öğrendik.

örnek

div {
  background: rgba(76, 175, 80, 0.3) /* şeffaflık oranı %30 olan yeşil arka plan */
}

Kişisel olarak deneyin

Şeffaf çerçeve içindeki metin

Bu, şeffaf bir çerçeve içinde yer alan metindir.

örnek

<html>
<head>
<style>
div.background {
  background: url(klematis.jpg) repeat;
  border: 2px solid black;
}
div.transbox {
  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
}
div.transbox p {
  margin: 5%;
  font-weight: bold;
  color: #000000;
}
</style>
</head>
<body>
<div class="background">
  <div class="transbox">
    <p>Şeffaf çerçevede yer alan bazı metinler.</p>
  </div>
</div>
</body>
</html>

Kişisel olarak deneyin

Örnek açıklaması

Öncelikle, arka plan resmi ve çerçeve içeren (class="background") bir <div> elementi oluşturduk.

Sonra, ilk <div> içinde (class="transbox") bir başka <div> oluşturduk.

<div class="transbox"> arka plan rengi ve çerçeve içerir - bu div şeffaftır.

Şeffaf <div> içinde, <p> elementi içinde bazı metin ekledik.