我在下面的图片中运行了这个例子,这是在Flash中完成的,我想知道是否有类似的影响,在图像底部有一个带有文本的透明框可以使用CSS或其他闪存？
http://www.ajaxline.com/files/imgloop.png http://www.ajaxline.com/files/imgloop.png
And*_*ore 48
当然,这是一种跨浏览器的方式:
<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>
此方法不需要JavaScript,不会导致在IE中丢失ClearType文本,并且与Firefox,Safari,Opera,IE6,7,8兼容......不幸的是,它只适用于一行文本.如果你想多条线路,无论是调整div.imageSub div的height和line-height财产,或使用以下(修改CSS和要求标签两次指定).
<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>