您可以在图片上叠加透明div [英] Can you overlay a transparent div on an image
问题描述
我跑过这个例子在下面的图片中，这是在Flash中完成，我想知道是否有类似的影响在一个图像的底部有一个透明的文本框上可以使用CSS或其他的闪存？
I ran accross this example in the image below that is done in Flash and I was wondering if a similar affect of having a transparent box at the bottom of an image with text on it is possible with CSS or something other then flash?
推荐答案
当然，这是一种跨浏览器的方式：
Sure, here is a cross-browser way of doing so:
<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 和 height 属性，或使用以下（对CSS的修改，并要求指定两次标签）。
This method doesn't require JavaScript, doesn't cause to lose ClearType text in IE, and is compatible with Firefox, Safari, Opera, IE6,7,8... Unfortunately, it only works for one line of text. If you want multiple lines, either adjust div.imageSub div's height and line-height property, or use the following (modifications to the CSS and requires the label to be specified twice).
<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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
