CSS Saydamlık (opacity): Saydam Element, Arka Plan…

Q: CSS'te opacity ne işe yarar?

Bir elementin ne kadar yarı saydam olduğunu 0'dan (tamamen saydam) 1'e (tamamen opak) kadar ayarlar. Metni, kenarlığı, resimleri ve her çocuğu dahil bütün elemente tek bir düzleştirilmiş katman olarak uygulanır.

Q: Metin değil de yalnızca arka plan nasıl saydam yapılır?

opacity'ye dokunma ve arka plana alfalı bir renk ver: background-color: rgb(37 99 235 / 0.5); ya da rgba(37, 99, 235, 0.5). Metin ve çocuklar tamamen opak kalır.

Q: opacity: 0, visibility: hidden ve display: none arasındaki fark nedir?

opacity: 0 elementi gizler ama element hâlâ yer kaplar, tıklanabilir ve ekran okuyucular tarafından okunur. visibility: hidden yeri korur ama tıklanamaz ve okunmaz. display: none onu düzenden tamamen kaldırır.

Q: opacity yüzde olabilir mi?

Evet. Bütün güncel tarayıcılarda opacity: 50%, opacity: 0.5 ile aynıdır. 0'ın altındaki ya da 1'in üstündeki değerler bu aralığa sıkıştırılır.

opacity ne yapar

opacity bir elementin ne kadar yarı saydam olduğunu ayarlar: 1 düzdür (varsayılan), 0 görünmezdir ve aradaki her değer arka planın görünmesine izin verir. Aşağıdaki kutular, görebilesin diye çizgili bir arka planın üzerinde duruyor:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Opacity</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .bg {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: repeating-linear-gradient(45deg, #e5e7eb 0 10px, #ffffff 10px 20px);
    }
    .box { width: 90px; height: 70px; background: #2563eb; color: white; display: grid; place-items: center; font-weight: 700; }
  </style>
</head>
<body>
  <div class="bg">
    <div class="box" style="opacity: 1">1</div>
    <div class="box" style="opacity: 0.75">0.75</div>
    <div class="box" style="opacity: 0.5">0.5</div>
    <div class="box" style="opacity: 0.25">0.25</div>
    <div class="box" style="opacity: 0">0</div>
  </div>
</body>
</html>

Son kutu hâlâ orada: satırdaki 90px'lik yuvasını kaplıyor, yalnızca hiçbir şey çizmiyor. Beyaz sayıların kutularıyla birlikte solduğuna dikkat et. opacity elemente ve içindeki her şeye uygulanır.

Saydam arka plan, düz metin

Opacity çocukları da soldurduğu için "okunaklı metnin arkasında yarı saydam bir arka plan" için yanlış araçtır. Bunun yerine alfa kanallı bir arka plan rengi kullan:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background alpha</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .bg { padding: 16px; background: repeating-linear-gradient(45deg, #f59e0b 0 10px, #ffffff 10px 20px); }
    .card { padding: 14px; margin-bottom: 10px; color: #111827; font-weight: 700; }
    .with-opacity { background: #ffffff; opacity: 0.6; }
    .with-alpha { background: rgb(255 255 255 / 0.6); }
  </style>
</head>
<body>
  <div class="bg">
    <div class="card with-opacity" id="a">opacity: 0.6 (text fades too)</div>
    <div class="card with-alpha" id="b">background alpha 0.6 (text stays solid)</div>
  </div>
  <p id="out"></p>
  <script>
    const s = (id) => getComputedStyle(document.getElementById(id));
    document.getElementById('out').textContent =
      'first: opacity ' + s('a').opacity + '  |  second: opacity ' + s('b').opacity + ', background ' + s('b').backgroundColor;
  </script>
</body>
</html>

İki beyaz panel de çizgilerin aynı miktarda görünmesine izin veriyor. İlkinde metin panelle birlikte soluyor. İkincisinde yalnızca arka plan rengi saydam (rgb(255 255 255 / 0.6), rgba(255, 255, 255, 0.6) ile aynı), bu yüzden metin düz ve kolay okunur kalıyor. Alfalı renkleri renkler sayfası anlatıyor.

Bir çocuk ebeveyninin opaklığından kaçamaz: çocuktaki opacity: 1 hiçbir şey yapmaz, çünkü ebeveyn, çocuk zaten içinde olan tek bir soluk katman olarak çizilir.

Değerler

Değer	Sonuç
`1` ya da `100%`	tamamen opak (varsayılan)
`0.5` ya da `50%`	yarı saydam
`0` ya da `0%`	tamamen saydam, hâlâ düzende ve tıklanabilir
`1.5`, `-1`	`1` ve `0`'a sıkıştırılır

Opaklık görsel olarak miras alınır ama bir özellik olarak alınmaz: bir çocuğun hesaplanmış opacity değeri 1 kalır, ama soluk bir ebeveynin içinde çizilir.

opacity: 0, visibility: hidden ve display: none

Üçü de bir elementi kaybettirir, ama diğer her şeyde farklıdırlar:

	`opacity: 0`	`visibility: hidden`	`display: none`
Yer kaplar	evet	evet	hayır
Tıklama ve odak alır	evet	hayır	hayır
Ekran okuyucular okur	evet	hayır	hayır
Transition verilebilir	evet, yumuşakça	bir uçta birden geçer, solma yok	hayır

Can yakan fark ikinci satırdır. opacity: 0 olan bir buton hâlâ tıklanabilir ve Tab ile ona gelinebilir:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden but clickable</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 10px; }
    .row button { width: 150px; height: 40px; font: inherit; }
  </style>
</head>
<body>
  <div class="row">
    <button id="o" style="opacity: 0">opacity: 0</button>
    <button id="v" style="visibility: hidden">visibility: hidden</button>
    <button id="d" style="display: none">display: none</button>
    <button id="shown">Visible</button>
  </div>
  <p id="out"></p>
  <script>
    const hit = (id) => {
      const r = document.getElementById(id).getBoundingClientRect();
      const top = document.elementFromPoint(r.left + 10, r.top + 10);
      return id + ': ' + (top && top.id === id ? 'clickable' : 'not clickable');
    };
    document.getElementById('out').textContent = [hit('o'), hit('v')].join('  |  ') +
      '  |  the Visible button starts at x = ' + document.getElementById('shown').offsetLeft + 'px';
  </script>
</body>
</html>

Gösterge, tarayıcıya gizli her butonun içindeki bir noktanın altında hangi elementin olduğunu soruyor. opacity: 0 olan buton "tıklanabilir" diye cevap veriyor; visibility: hidden olan vermiyor. Visible butonu iki boş 150px'lik yuvadan sonra başlıyor, çünkü yerini geri veren tek buton display: none olandır. Bir şeyi soldurup sonra kaldırmak için opacity'yi canlandır ve sonunda visibility: hidden ayarla.

Hover'da solma

opacity canlandırması en ucuz özelliklerden biridir, bu yüzden bir şeyleri soldurup belirginleştirmenin standart yoludur. Bir resmin üzerinde beliren bir altyazı:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover fade</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .tile { position: relative; width: 240px; height: 150px; background: linear-gradient(135deg, #2563eb, #16a34a); }
    .caption {
      position: absolute;
      inset: auto 0 0 0;
      padding: 10px;
      background: rgb(17 24 39 / 0.8);
      color: white;
      opacity: 0;
      transition: opacity 0.25s ease-out;
    }
    .tile:hover .caption, .tile:focus-within .caption { opacity: 1; }
  </style>
</head>
<body>
  <a class="tile" href="#" style="display: block">
    <span class="caption">Caption appears on hover and focus</span>
  </a>
</body>
</html>

:focus-within altyazıyı klavye kullanıcılarına da gösterir. Yukarıdaki tabloyu aklında tut: görünmezken altyazı hâlâ ekran okuyucular tarafından okunur; bir altyazı için istediğin de budur.

Erişilebilirlik: soluk metin kontrast kaybeder

Opaklığı düşürmek kontrastı düşürür. opacity: 0.5 ile beyaz üzerindeki gri metin, gövde metninin ihtiyaç duyduğu 4.5:1 oranının çok altına düşebilir. İkincil metin için koyu bir rengi soldurmak yerine kontrastı geçen bir renk seç. Devre dışı kontroller için düşürülmüş opaklık yaygın bir işarettir, ama kontrolün klavyeyle de erişilemez olması ve devre dışı olarak duyurulması için onu disabled özniteliğiyle eşleştir.

Yan etki: stacking context

1'in altındaki her opacity, tıpkı transform gibi yeni bir stacking context oluşturur. Yüksek z-index değerli çocuklar bu durumda yalnızca soluk elementin içinde istiflenir ve onun dışındaki elementlerin üstüne çıkamaz. Soluk bir panelin içindeki bir açılır menü başka bir elementin altına kayıyorsa nedeni budur (istiflemeyi z-index sayfası açıklıyor).

Sık yapılan hatalar

Arka planını saydam yapmak için bir kartı soldurmak. Metin de solar. Arka planda rgb(... / 0.5) kullan.
Bir çocuğu yeniden opak yapmaya çalışmak. Bir ebeveynin opaklığı her çocuğu sınırlar.
Tek başına opacity: 0 ile gizlemek. Element hâlâ tıklama ve odak alır. visibility: hidden ekle ya da display: none kullan (pointer-events: none tıklamaları durdurur ama klavye odağını durdurmaz).
opacity: 50 yazmak. Opaklık 0 ile 1 arasındadır; 50, 1'e sıkıştırılır. 0.5 ya da 50% yaz.
Opaklık yüzünden düşük kontrastlı metin. Orijinal rengin değil sonucun kontrastını kontrol et.

Sıkça Sorulan Sorular

CSS'te opacity ne işe yarar?

Bir elementin ne kadar yarı saydam olduğunu 0'dan (tamamen saydam) 1'e (tamamen opak) kadar ayarlar. Metni, kenarlığı, resimleri ve her çocuğu dahil bütün elemente tek bir düzleştirilmiş katman olarak uygulanır.

Metin değil de yalnızca arka plan nasıl saydam yapılır?

opacity'ye dokunma ve arka plana alfalı bir renk ver: background-color: rgb(37 99 235 / 0.5); ya da rgba(37, 99, 235, 0.5). Metin ve çocuklar tamamen opak kalır.

Bir çocuk element ebeveyninden daha opak olabilir mi?

Hayır. Bir ebeveynin opaklığı bütün gruba uygulanır, bu yüzden bir çocuktaki opacity: 1 onu geri alamaz. 0.5 olan bir ebeveynin çocuğu en fazla yarı opaklıkta çizilir. Bunun yerine saydamlığı ebeveynin arka plan rengine taşı.

opacity: 0, visibility: hidden ve display: none arasındaki fark nedir?

opacity: 0 elementi gizler ama element hâlâ yer kaplar, tıklanabilir ve ekran okuyucular tarafından okunur. visibility: hidden yeri korur ama tıklanamaz ve okunmaz. display: none onu düzenden tamamen kaldırır.

opacity yüzde olabilir mi?

Evet. Bütün güncel tarayıcılarda opacity: 50%, opacity: 0.5 ile aynıdır. 0'ın altındaki ya da 1'in üstündeki değerler bu aralığa sıkıştırılır.

İlgili kavramlar