CSS opaklığı ve alt öğeler

Question

<style type="text/css"> 
div#foo { 
    background: #0000ff; 
    width: 200px; 
    height: 200px; 

    opacity: 0.30; 
    filter: alpha(opacity = 30); 
} 
div#foo>div { 
    color: black; 
    opacity:1; 
    filter: alpha(opacity = 100); 
} 
</style> 

<div id="foo"> 
    <div>Lorem</div> 
    <div>ipsum</div> 
    <div>dolor</div> 
</div> 

Yukarıdaki örnekte, div#foo'un opaklığı, alt öğeleri tarafından kalıtılır ve metnin neredeyse okunamaz hale gelmesine neden olur. Kalıtsal olduğunu, yanlışlığın ebeveyn divuna uygulandığını ve çocukların da bunun bir parçası olduğunu söylemek yanlıştır, bu yüzden çocuk öğeleri için onu geçersiz kılmaya çalışmak teknik açıdan opak olmadığından işe yaramaz.

Genellikle böyle durumlarda alfa png arka plan görüntüsü kullanıyorum, ancak bugün içeriği etkilemeden yarı saydam bir arka plan oluşturmanın daha iyi bir yolu olup olmadığını merak ediyorum.

Answer 1

rgba()'u kullanabilirsiniz.

div#foo 
{ 
    background: rgba(0, 0, 255, 0.3); 
} 

o CSS PIE kullanmak eski internet Kaşifler çalışmasını sağlamak için. some limitations vardır, ancak bunlar geriye doğru uyumlu bir şekilde işlenir: RGB değeri doğru şekilde oluşturulacak ve opaklık göz ardı edilecektir.

Answer 2

Opaklık kullanırsanız, bunları ayrı DIV'lere yerleştirmeniz ve sonra bunları bir araya getirmeniz gerekir. Arka plan DIV alt opaklığa sahip olacak ve ön plan DIV içeriğinizi% 100 opaklığa sahip olacaktı. En iyi yolu arka plana şeffaf png ayarlıyor

Answer 3

..