'da beyaz opaklık efekti elde etmek, bu etkiyi tarayıcılar arası uyumlu bir şekilde, ayrı görüntüler hazırlamak zorunda kalmadan elde etmenin bir yolu var mıdır?html/css
Temel olarak, metnin yerleştirildiği çerçeve,% 50 opaklık beyaz örtüsüne sahiptir .. Arka plana ek olarak başka herhangi bir resim oluşturmayı içermeyen bir çözüm isterim, ancak mümkün olup olmadığını bilmiyorum!
deneyin RGBA, ör
div { background-color: rgba(255, 255, 255, 0.5); }
Her zaman olduğu gibi, bu, yazılan her tarayıcıda işe yaramaz.
çalışır ancak IE ile uyumlu değildir, bu yüzden% 50 alfa ile 1 piksellik bir arka plan görüntüsü kullanmak zorunda kaldım. Yine de teşekkürler :) – Jack
Tarayıcı desteği nedeniyle rgba'u kullanamıyorsanız ve yarı saydam beyaz PNG'yi dahil etmek istemiyorsanız, iki konumlandırılmış öğe oluşturmanız gerekir. Biri beyaz kutu için, opaklıkla, ve bir katlanmış metin için, katı.
body { background: red; }
.box { position: relative; z-index: 1; }
.box .back {
position: absolute; z-index: 1;
top: 0; left: 0; width: 100%; height: 100%;
background: white; opacity: 0.75;
}
.box .text { position: relative; z-index: 2; }
body.browser-ie8 .box .back { filter: alpha(opacity=75); }<!--[if lt IE 9]><body class="browser-ie8"><![endif]-->
<!--[if gte IE 9]><!--><body><!--<![endif]-->
<div class="box">
<div class="back"></div>
<div class="text">
Lorem ipsum dolor sit amet blah blah boogley woogley oo.
</div>
</div>
</body>
olası yinelenen [CSS: Stil görüntüleri çapraz ziyaret tarayıcı yolu/çapraz tarayıcı donukluk] (http://stackoverflow.com/questions/1438671/css-styling-visited-images-cross-browser -kesit-tarayıcı-opaklık) –
Dupe bakın. Siyah metni ayrı bir DIV'ye –
'a koymanız gerekecek, ancak IE6 için filtrelerin gerçekten kaynak emici olduklarını unutmayın (IE6 Workstation'ın muhtemelen fazladan ayırmaması için). – Hannes