Almak istediğim ekran çıktısı bu:
HTML YAPIM ŞÖYLE:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<style type="text/css">
#content{position:relative;width:600px;height:400px;margin:0 auto;background:#000;}
#sub{ position:absolute; z-index:2; left:0; bottom:30px; width:100%; color:#FFF; font:15px Arial; text-align:center; }
#sub .fake{ opacity:0; padding:5px 0; }
#sub .back{ position:absolute; z-index:3; left:0; top:0; width:100%; height:100%; background:#ff0000; opacity:0.7; }
#sub .text{ position:absolute; z-index:4; left:0; top:0; width:100%; height:100%; padding:5px 0; }
</style>
</head>
<body>
<div id="content">
<div id="sub">
<div class="fake">text</div>
<div class="back"></div>
<div class="text">text</div>
</div>
</div>
</body>
</html>Mümkün mertebe özetleyerek sıkıntımı anlatayım.
.text divindeki yazı jsden saniyede 5 defa değişiyor (satır sayısı da değişebiliyor). Backround renginin yükseklik kazanabilmesi için mecburen aynı yazıyı "fake" classına da yazdırıyorum. Yazıyı sadece bir kere (tek html elemanına) yazdırarak aynı sonucu almak istiyorum.
Detaylar şöyle:
-Bu yapıda
#sub mutlaka absolute olmak zorunda (kural farzedelim).
-
.back clasının tek görevi yazıya arkaplan rengi vermek. Rengi ayrı div yapmamın sebebi ise opacitynin jsden değişmesi gerekiyor ve doğrudan yazıya arkaplan rengi verirsem yazı da saydamlaşıyor ve bu istemediğimiz bir durum.
-
.back ve
.text classları
#sub divine göre konumlanıyor.
.back divini textin içine alıp opacityi düşürürsem yazı da saydamlaşıyor.
Bu durumda
.backteki arkaplanın renginin yazıya göre yüksekliğinin ayarlanabilmesi için
.fake classı içine de opacity:0; olarak aynı metni yazdırmak zorunda kalıyorum. Bunu yapmazsam
#sub divi yazıya göre yükseklik kazanmadığı için arkaplan rengi de gerekli yüksekliği kazanmıyor.
Yapmak istediğimiz şeyi tekrar özetlemeye çalışayım.
Yazıyı sadece bir defa yazacağız.
Arkaplan rengi yazıya göre yükseklik kazanacak.
Arkaplanın opacitysi değiştiği zaman yazı saydamlaşmayacak.
Html yapısıyla bilgisayarınızda deneyebilirsiniz. Basit gibi görünüyor ama bi türlü çözemedim. JS saniyede 5 defa iki dive birden içerik ekleyince bi' süre sonra biraz kasıyor.
Yardımlarınız için şimdiden teşekkürler.