Aşağıdaki koda benzer bir şey kullanıyorum:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Bunun arka planın 0,4 opaklığa ve metnin %100 opaklığa sahip olmasını sağlamasını beklerdim. Bunun yerine her ikisinin de opaklığı 0,4 oldu.
Çocuklar opaklığı miras alır. Eğer almazlarsa garip ve rahatsız edici olur.
Arka plan görüntünüz için yarı saydam bir PNG dosyası kullanabilir veya arka plan renginiz için bir RGBa (alfa için a) rengi kullanabilirsiniz.
Örnek, %50 soluk siyah arka plan:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Ben olsam şöyle bir şey yapardım
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
İşe yaraması lazım. Bu, bir renge değil (bunun için sadece rgba kullanmanız gerekir) yarı saydam bir görüntüye sahip olmanız gerektiğini varsayar. Ayrıca, Photoshop'ta görüntünün opaklığını önceden değiştiremeyeceğiniz de varsayılmaktadır.
Bunun nedeni, içteki div'in, içinde bulunduğu div'in (%40 opaklığa sahip) opaklığının %100'üne sahip olmasıdır.
Bunu aşmak için yapabileceğiniz birkaç şey var.
Bunun gibi iki ayrı div oluşturabilirsiniz:
<div id="background"></div>
<div id="bContent"></div>
Arka plan için istediğiniz CSS opaklığını ve diğer özellikleri ayarlayın ve bContent div'ini biçimlendirmek ve konumlandırmak için z-index özelliğini (z-index) kullanın. Bu sayede div'i, opaklığını bozmadan arka plan div'inin üzerine yerleştirebilirsiniz.
Başka bir seçenek de RGBa'dir. Bu, div'lerinizi iç içe yerleştirmenize ve yine de div'e özgü opaklık elde etmenize olanak tanır.
Son seçenek, istediğiniz resim düzenleyicisinde istediğiniz renkte yarı şeffaf bir .png resmi oluşturmak, background-image özelliğini resmin URL'sine ayarlamak ve ardından CSS ile uğraşmak ve iç içe geçmiş bir div yapısının yeteneğini ve organizasyonunu kaybetmek konusunda endişelenmenize gerek kalmamasıdır.