Bu örnekte, Flash uygulamasında yapılan resimde görüntünün karşısına geçtim ve bir resmin altındaki bir resmin üzerine şeffaf bir kutuya sahip olmanın benzer bir etki olup olmadığını merak ediyorum. CSS veya başka bir şey ile mümkün o zaman flash? KesinlikleResimdeki saydam bir divı üst üste bindirebilir
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
Tabii, burada bunu yaparken çapraz tarayıcı yoludur:
<html>
<head>
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
height: 16px;
line-height: 16px;
text-align: center;
overflow: hidden;
}
div.imageSub div.blackbg {
z-index: 2;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
</head>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<img src="image.jpg" alt="Something" />
<div class="blackbg"></div>
<div class="label">Label Goes Here</div>
</div>
</body>
</html>
Bu yöntem JavaScript gerektirmeyen, IE ClearType metnini kaybetmesine neden olmaz ve uyumlu Firefox, Safari, Opera, IE6,7,8 ... Ne yazık ki, sadece bir metin satırı için çalışıyor. Birden çok satır isterseniz, div.imageSub div 'un height ve line-height özelliğini ayarlayın ya da aşağıdakileri kullanın (CSS'deki değişiklikler ve etiketin iki kez belirtilmesini gerektirir).
<html>
<head>
<style type="text/css">
div.imageSub { position: relative; }
div.imageSub img { z-index: 1; }
div.imageSub div {
position: absolute;
left: 15%;
right: 15%;
bottom: 0;
padding: 4px;
}
div.imageSub div.blackbg {
z-index: 2;
color: #000;
background-color: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: 0.5;
}
div.imageSub div.label {
z-index: 3;
color: white;
}
</style>
</head>
<body>
<div class="imageSub" style="width: 300px;"> <!-- Put Your Image Width -->
<img src="image.jpg" alt="Something" />
<div class="blackbg">Label Goes Here</div>
<div class="label">Label Goes Here</div>
</div>
</body>
</html>
.
<div style="background-image: url(image.png);" >
<div style="position:relative; top:20px; left:20px;">
Some text here
</div>
</div>
<html>
<body>
<div style="position: absolute; border: solid 1px red">
<img src="http://www.ajaxline.com/files/imgloop.png"/>
<div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; background-color: gray; opacity: .80; -moz-opacity: 0.80; filter:alpha(opacity=80);"/>
<div style="position: absolute; top:0px; left:40%; width:20%; height: 10%; color: white;">
Hello
</div>
</div>
</body>
</html>
Bu şaşırtıcı çok teşekkür ederim! YSlow firefox eklentisini çalıştırırken – JasonDavis
Ben kötü kullanımdan bahseder 1 şey CSS İfadeler olduğunu, bu doğru biri olarak kabul edilmez? – JasonDavis
** @ jasondavis: ** 'filter' ve' -ms-filter' bunlardan biri ama IE için seçiminiz yok. Ve unutmayın, ** YSlow ** yasa değildir. –