Soru Ebeveyn divs opaklığını belirtin, ancak çocukları HTML öğelerini etkilemeyecek şekilde yapın


Bir div içinde paragraf elemanım var. Div 0.3 opaklığa sahiptir ve paragraf 1 opaklığa sahiptir.

Öğeleri gösterdiğimde paragraf 0,3 gibi bir opaklığı olduğu gibi şeffaf görünüyor.

Div içindeki paragrafı tam opaklığa sahip olmanın bir yolu var mı? Belki bunun için bir CSS değeri belirleyebilirim?

<div style="opacity: 0.3; background-color: red;">
   <p style="opacity: 1;">abcde</p>
</div>

18
2017-11-18 03:42


Menşei




Cevaplar:


Yapamazsınız, opaklık seviyesi daima ebeveynin opaklığına göre değişir. 0.3'ün 1.0'ı, 0.3'ün% 100'ünü, 0.3'ünü ve 0.5'inin 0.5'ini de 0.35'tir. Arka plan rengi için yalnızca opaklık kullanıyorsanız, rengin RGBA yöntemini kullanarak belirtebilirsiniz, böylece kırmızı, içeriğe (ve dolayısıyla içindeki paragrafa) değil, opak olur.

<div style="background-color: rgba(255, 0, 0, 0.3);">
   <p>abcde</p>
</div>

Buraya bakın


23
2017-11-18 03:46





Bunu, animuson cevabına bir yorum olarak eklemek istedim, ancak henüz yorum gönderemiyorum, bu yüzden bir 'yanıt' olarak yayınlayacağım. RGBa harika çalışıyor, ancak sadece yeni tarayıcılarda. IE8 bile bunu desteklemiyor, ki bu ciddi bir gerileme, çünkü birçok insan hala IE8 kullanıyor.

.color-block {
/* The Fallback Color */
background: rgb(200, 54, 54);

/* The Important Bit - Alpha Transparency */ 
background: rgba(200, 54, 54, 0.5); 
}

Lütfen oku http://css-tricks.com/examples/RGBaSupport/ daha fazla bilgi için.

Genelde problemi tamamen iki div kullanarak atlatırım. Saydam arka plan için ilk ve içerik için ikincisi, birincinin üzerine yerleştirilmiş. Temiz değil, güzel değil ve ben onunla mutlu olduğumu iddia edemem, ama ... hatta IE7 ve IE6'da çalışıyor.


1
2017-11-18 08:15





Bu beklediğiniz gibi çalışmadığı için talihsiz bir durum. Diğer stiller miras için bir değere sahiptir - bu yüzden neden opaklık olmaz?

Çok karmaşık bir şey yapmıyorsanız bir çalışma var:

  • Genişlik / yükseklik ile bir ana DIV (veya diğer blok elemanı) oluşturun İhtiyacınız var ve konum: akraba.

  • Saydamlık değeriniz, bir genişlik / yükseklik ile bir çocuk DIV oluşturun % 100 ve konum: mutlak (muhtemelen sol / üst: 0 da)

  • İçeriğiniz ve opaklığa ayarlanmış başka bir çocuk DIV oluşturun ne istersen.

Örnek:

<div style="width:200px;height:100px;position:relative">
    <div style="opacity:.03;background-color:blue;width:100%;height:100%;position:absolute;left:0;top:0"></div>
    <div style="opacity:.09">This is my content</div>
</div>

1
2017-11-18 11:37





sadece basit bir şey vermek zorundasın

background: rgba(255,0,0,0.3)

& IE için bu filtreyi kullanın

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000)"; /* IE8 */    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFF0000,endColorstr=#4CFF0000);   /* IE6 & 7 */      
zoom: 1;

Daha fazla bilgi için bu örneğe bakın

http://jsfiddle.net/epmcM/

rgba filtrenizi buradan oluşturabilirsiniz http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ 


0
2017-11-18 03:50