Çözüldü "Rgba()" kodu hiçbir şekilde çalışmıyor

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
ProGamer90

ProGamer90

Kilopat
Zamanın Tanığı
Katılım
15 Haziran 2020
Mesajlar
1.162
Çözümler
2
Yer
Dünya'da bir yer
Daha fazla  
Sistem Özellikleri
Asus Prime B450M-K
Ryzen 5 5600
Sapphire RX 6700 10GB
16 GB Corsair Vangeance
750W Gigabyte PSU
AOC 21" Monitör
Cinsiyet
Erkek
Basit bir kutu div'ine background ile shorthand olarak bir image ve rgba() ile de opacity vermek istiyorum ama kod hiçbir şekilde çalışmıyor.
Chrome kullanıyorum fakat Edge ile de çalışmıyor. Sebebi nedir?


Kod: 
<div class="box"></div>

.box {
    background: rgba(225, 0, 0, 0.4) url("images/bg2.jpg") no-repeat;
    width: 100%;
    height: 100vh;
    background-size: cover;
}
 
Son düzenleme:
Çözüm
ProGamer90
ali dursun dedi:
Hocam resmide background olarak verdiğiniz için rengin üstüne geliyor resim. Divin içindeki elemanlara z-index verebilirsiniz position relative ile birlikte. Yahut arkaplan resmini divin before verebilirsin.
Genişletmek için tıkla...

Div'in içi boş yani <img> olarak vermek yerine background: url(''); olarak verdim. Dolayısıyla z-index verebilmem mümkün değil.

Reend dedi:
Gizli sekmeden girdiğinizde gözüküyor mu?
Genişletmek için tıkla...

Malesef gizli sekmeden de girsem rgba() fonksiyonu çalışmıyor.

Sorunu uzun araştırmalarım sonucunda çözdüm :) .box div'ine position:relative ekleyip ardından .box::after diyip aşağıdaki kodları yazınca oldu :)

Kod: 
.box { 
    background-image: url("images/bg2.jpg");
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
 
.box::after {
    content: ' ';
    position: absolute;
    left: 0;  right: 0; top: 0; bottom: 0; /* Fill the entire space */
    background-color: rgba(255, 0, 0, 0.4);
}
Tarihe göre sırala Puana göre sırala
ali dursun dedi:
opacity: 0.5 yapabilirsin direkt.
Genişletmek için tıkla...

Evet biliyorum fakat o şekilde yaparsam div'in içindeki elemanları da etkiliyor. Bunun olmasını istemiyorum. Sizce rgba() neden çalışmıyor olabilir?
 
Artı 0 Eksi
ProGamer90 dedi:
Evet biliyorum fakat o şekilde yaparsam div'in içindeki elemanları da etkiliyor. Bunun olmasını istemiyorum. Sizce rgba() neden çalışmıyor olabilir?
Genişletmek için tıkla...
Hocam resmide background olarak verdiğiniz için rengin üstüne geliyor resim. Divin içindeki elemanlara z-index verebilirsiniz position relative ile birlikte. Yahut arkaplan resmini divin before verebilirsin.
 
Artı 0 Eksi
ali dursun dedi:
Hocam resmide background olarak verdiğiniz için rengin üstüne geliyor resim. Divin içindeki elemanlara z-index verebilirsiniz position relative ile birlikte. Yahut arkaplan resmini divin before verebilirsin.
Genişletmek için tıkla...

Div'in içi boş yani <img> olarak vermek yerine background: url(''); olarak verdim. Dolayısıyla z-index verebilmem mümkün değil.

Reend dedi:
Gizli sekmeden girdiğinizde gözüküyor mu?
Genişletmek için tıkla...

Malesef gizli sekmeden de girsem rgba() fonksiyonu çalışmıyor.

Sorunu uzun araştırmalarım sonucunda çözdüm :) .box div'ine position:relative ekleyip ardından .box::after diyip aşağıdaki kodları yazınca oldu :)

Kod: 
.box { 
    background-image: url("images/bg2.jpg");
    width: 100%;
    height: 100vh;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
 
.box::after {
    content: ' ';
    position: absolute;
    left: 0;  right: 0; top: 0; bottom: 0; /* Fill the entire space */
    background-color: rgba(255, 0, 0, 0.4);
}
 
Son düzenleme:
Artı 0 Eksi
Çözüm

Benzer konular

Spawrain
  • Çözüldü
Çözüldü  Last-child kodu çalışmıyor
Mesaj
2
Görüntüleme
1.265
Spawrain
Spawrain
Black Swordsman
  • Çözüldü
Çözüldü  Tailwind CSS başarılı bir şekilde kurulmasına rağmen çalışmıyor
Mesaj
8
Görüntüleme
2.768
kaan.w
K
Dwallers
Disqus hiçbir yorum gözükmüyor
Mesaj
3
Görüntüleme
418
Mistix
Mistix
Xayanc
Kolay bir şekilde site nasıl kurulur?
Mesaj
5
Görüntüleme
395
84mirkoni
84mirkoni
Furkan_09
  • Soru
QR kodu nasıl çözümleniyor?
Mesaj
0
Görüntüleme
1.038
Furkan_09
Furkan_09

Bu konuyu görüntüleyen kullanıcılar

Toplam: 2 (üye: 0, misafir: 2)

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı