Destek Online
MirrorLooking Glass
GenixNodeGenixNode
Müşteri Paneli
Ana içeriğe geç

CSS’te Arka Plan Görseli Opaklığını Ayarlama

Giriş​

opacity bir CSS özelliğidir ve bir elementin saydamlığını (opaklığını) değiştirmene olanak tanır.
Varsayılan olarak tüm elementlerin değeri 1’dir. Bu değeri 0’a yaklaştırdığında element giderek daha şeffaf görünmeye başlar.

Yaygın bir kullanım örneği, bir resmi arka plan olarak kullanmaktır.
Arka planın opaklığını ayarlamak, metnin okunabilirliğini artırabilir veya istediğin görsel etkiyi yakalamanı sağlar.

Ancak CSS’te doğrudan sadece background-image için opacity uygulamanın bir yolu yoktur.
Opacity özelliğini bir elemana verdiğinde, arka planla birlikte içindeki tüm alt elemanları da şeffaf hale getirir.

Bu durum özellikle sayfa tasarlarken görsel hiyerarşi veya okunabilirlik açısından sorun yaratabilir.
Örneğin, arka plan görselini daha az dikkat çekici yapmak isteyebilirsin ki üzerindeki metin daha net öne çıksın.
Ama sadece opacity uygularsan, yazılar da saydamlaşır ve bu da istenmeyen bir sonuç olur.

Bu yazıda, arka plan görsellerine opaklık vermede yaşanan bu kısıtlamayı aşmak için iki farklı yöntem öğreneceksin.
Bu yöntemler sayesinde, arka plan görseline istediğin şeffaflığı uygularken element içindeki metin, başlık gibi içeriklerin görünürlüğünü kaybetmezsin.

Ön Bilgilendirme​

Bu yazıyı uygulamalı olarak takip etmek istiyorsan, aşağıdaki konulara aşina olman gerekir:

Yöntem 1 — Ayrı Bir Görsel Elemanı Kullanmak ve Konumlandırma​

İlk yaklaşımda iki ayrı element kullanacağız:

  1. wrap → position: relative ile referans noktası oluşturur.
  2. img → position: absolute ile içeriklerin arkasında yer alır ve stacking context sayesinde katmanlama yapılır.

Bu yaklaşım için örnek HTML yapısı:

<div class="wrap">
  <img src="background.jpg" alt="Arka Plan" class="bg-image">
  <div class="content">
    <h1>Merhaba Dünya</h1>
    <p>Bu metin arka planın üzerinde net şekilde görünecek.</p>
  </div>
</div>

Bu yapıya ait CSS stilleri ise şöyle olabilir:

Bu yapıya ait CSS stilleri ise şöyle olabilir:

.wrap {
  position: relative;   /* Referans noktası */
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.bg-image {
  position: absolute;   /* İçeriğin arkasına yerleşir */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* Görseli kırpıp boyutlandırır */
  opacity: 0.5;         /* Arka plan görseline şeffaflık */
  z-index: 1;           /* İçerikten bir kademe aşağıda */
}

.content {
  position: relative;
  z-index: 2;           /* Görselin üstünde görünür */
  color: white;
  text-align: center;
  padding-top: 150px;
}

Bu HTML ve CSS birleşimi, metnin bir görselin üzerinde yer aldığı bir sonuç üretecektir.

<style>
.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;       /* Arka plan resmi şeffaf */
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative; /* İçeriği üstte tut */
}

.demo-content h1 {
  padding: 100px 1em; /* Yukarı/aşağı boşluk + yatay boşluk */
}
</style>

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="background.png"
    alt="Arka Plan"
  >
  <div class="demo-content">
    <h1>Merhaba Dünya!</h1>
  </div>
</div>
Aynı örneği senin yaptığın CSS/HTML yapısına göre uyarladım kanka:  

```html
<style>
.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;       /* Arka plan resmi şeffaf */
  position: absolute; 
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative; /* İçeriği üstte tut */
}

.demo-content h1 {
  padding: 100px 1em; /* Yukarı/aşağı boşluk + yatay boşluk */
}
</style>

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="background.png"
    alt="Arka Plan"
  >
  <div class="demo-content">
    <h1>Merhaba Dünya!</h1>
  </div>
</div>
```html

<style>

.demo-wrap {

  overflow: hidden;

  position: relative;

}



.demo-bg {

  opacity: 0.6;       /* Arka plan resmi şeffaf */

  position: absolute; 

  left: 0;

  top: 0;

  width: 100%;

  height: auto;

}



.demo-content {

  position: relative; /* İçeriği üstte tut */

}



.demo-content h1 {

  padding: 100px 1em; /* Yukarı/aşağı boşluk + yatay boşluk */

}

</style>



<div class="demo-wrap">

  <img

    class="demo-bg"

    src="background.png"

    alt="Arka Plan"

  >

  <div class="demo-content">

    <h1>Merhaba Dünya!</h1>

  </div>

</div>
```html
<div class="demo-pseudo">
  <div class="demo-content">
    <h1>Merhaba Dünya!</h1>
    <p>Bu içerik arka plan görselinin üzerinde net şekilde görünür.</p>
  </div>
</div>
```html
<div class="demo-pseudo">

  <div class="demo-content">

    <h1>Merhaba Dünya!</h1>

    <p>Bu içerik arka plan görselinin üzerinde net şekilde görünür.</p>

  </div>

</div>
```css
.demo-pseudo {
  position: relative;      /* Pseudo-element için referans oluşturur */
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.demo-pseudo::before {
  content: "";             /* Boş içerik */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("background.jpg") no-repeat center center/cover;
  opacity: 0.6;            /* Arka plan için şeffaflık */
  z-index: 1;              /* İçerikten bir kademe aşağıda */
}

.demo-content {
  position: relative;      /* İçeriği pseudo-elementin üstünde tutar */
  z-index: 2;
  color: white;
  text-align: center;
  padding-top: 150px;
}
```css
.demo-pseudo {

  position: relative;      /* Pseudo-element için referans oluşturur */

  width: 100%;

  height: 400px;

  overflow: hidden;

}



.demo-pseudo::before {

  content: "";             /* Boş içerik */

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url("background.jpg") no-repeat center center/cover;

  opacity: 0.6;            /* Arka plan için şeffaflık */

  z-index: 1;              /* İçerikten bir kademe aşağıda */

}



.demo-content {

  position: relative;      /* İçeriği pseudo-elementin üstünde tutar */

  z-index: 2;

  color: white;

  text-align: center;

  padding-top: 150px;

}
```html
<style>
.css-bg-example-2 .demo-wrap {
  position: relative; /* Pseudo-element için referans */
}

.css-bg-example-2 .demo-wrap:before {
  content: " "; 
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6; /* Arka plan şeffaflığı */
  background-image: url('background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.css-bg-example-2 .demo-content {
  position: relative; /* İçeriği üstte tutar */
}

.css-bg-example-2 .demo-content h1 {
  padding: 100px 1em;
  color: white; /* Yazı kontrastını artırır */
}
</style>

<div class="css-bg-example-2">
  <div class="demo-wrap">
    <div class="demo-content">
      <h1>Merhaba Dünya!</h1>
    </div>
  </div>
</div>
```html
<style>

.css-bg-example-2 .demo-wrap {

  position: relative; /* Pseudo-element için referans */

}



.css-bg-example-2 .demo-wrap:before {

  content: " "; 

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  opacity: 0.6; /* Arka plan şeffaflığı */

  background-image: url('background.png');

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

}



.css-bg-example-2 .demo-content {

  position: relative; /* İçeriği üstte tutar */

}



.css-bg-example-2 .demo-content h1 {

  padding: 100px 1em;

  color: white; /* Yazı kontrastını artırır */

}

</style>



<div class="css-bg-example-2">

  <div class="demo-wrap">

    <div class="demo-content">

      <h1>Merhaba Dünya!</h1>

    </div>

  </div>

</div>
```css
/* Arka plan görseli üzerinde metin okunabilirliğini artırmak için overlay kullanımı */
.example {
  position: relative;
  background: url("background.jpg") no-repeat center center/cover;
  color: white;
  padding: 100px 20px;
  text-align: center;
}

.example::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam katman */
  z-index: 0; /* Overlay katmanı arka planda */
}

.example h1,
.example p {
  position: relative;
  z-index: 1; /* Metin overlay’in üstünde kalsın */
}
```css
/* Arka plan görseli üzerinde metin okunabilirliğini artırmak için overlay kullanımı */

.example {

  position: relative;

  background: url("background.jpg") no-repeat center center/cover;

  color: white;

  padding: 100px 20px;

  text-align: center;

}



.example::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam katman */

  z-index: 0; /* Overlay katmanı arka planda */

}



.example h1,

.example p {

  position: relative;

  z-index: 1; /* Metin overlay’in üstünde kalsın */

}
```css
/* Hover efektiyle opaklığı dinamik ayarlama */
.example-button {
  opacity: 0.8;   /* Varsayılan opaklık */
  transition: opacity 0.3s ease; /* Yumuşak geçiş efekti */
}

.example-button:hover {
  opacity: 1;     /* Hover durumunda tam opaklık */
}
```css
/* Hover efektiyle opaklığı dinamik ayarlama */

.example-button {

  opacity: 0.8;   /* Varsayılan opaklık */

  transition: opacity 0.3s ease; /* Yumuşak geçiş efekti */

}



.example-button:hover {

  opacity: 1;     /* Hover durumunda tam opaklık */

}
```css
/* Hero bölümlerinde şeffaf arka plan kullanımı */
.hero-section {
  position: relative;
  background-color: rgba(255, 255, 255, 0.5); /* Yarı saydam beyaz katman */
  background-image: url('hero-image.jpg');
  background-blend-mode: multiply;            /* Renk ve görseli karıştırır */
  background-size: cover;
  background-position: center;
  padding: 150px 20px;
  text-align: center;
  color: #333;
}
```css
/* Hero bölümlerinde şeffaf arka plan kullanımı */

.hero-section {

  position: relative;

  background-color: rgba(255, 255, 255, 0.5); /* Yarı saydam beyaz katman */

  background-image: url('hero-image.jpg');

  background-blend-mode: multiply;            /* Renk ve görseli karıştırır */

  background-size: cover;

  background-position: center;

  padding: 150px 20px;

  text-align: center;

  color: #333;

}

Burada background-blend-mode: multiply özelliği, görselle beyaz yarı saydam rengi birleştirerek modern ve kontrastlı bir etki yaratır.

Sonuç​

Bu yazıda, arka plan görsellerine opaklık vermedeki kısıtlamaları aşmak için iki farklı yöntem öğrendin.
Birinci yöntemde görseli ayrı bir <img> etiketiyle arka plana alıp konumlandırmayı, ikinci yöntemde ise ::before pseudo-elementini kullanarak daha esnek bir çözüm elde etmeyi gördün.

Her iki yöntem de farklı senaryolarda işine yarayabilir.

  • Görselin boyutunu doğrudan kontrol etmek istediğinde veya daha basit bir yapı gerektiğinde img tabanlı yaklaşım daha uygun olabilir.
  • Eğer background-position, background-repeat ve background-size gibi özelliklerden yararlanmak istiyorsan, pseudo-element tabanlı yaklaşım çok daha güçlü bir çözüm sunar.

Sonuç olarak, hangi yöntemi seçeceğin tamamen projenin ihtiyaçlarına ve tasarımın gerekliliklerine bağlıdır.
Önemli olan, hem arka plan görselinde istediğin görsel etkiyi yakalamak hem de metinlerin ve diğer içeriklerin her zaman okunabilir ve ön planda kalmasını sağlamaktır.