Html 你能在图像上覆盖一个透明的div吗
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1183633/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you overlay a transparent div on an image
提问by JasonDavis
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?
我在下面的图片中运行了这个例子，它是在 Flash 中完成的，我想知道在带有文本的图像底部有一个透明框的类似效果是否可以使用 CSS 或其他东西而不是 Flash？
(source: ajaxline.com)
（来源：ajaxline.com）
回答by Andrew Moore
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>
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 heightand line-heightproperty, or use the following (modifications to the CSS and requires the label to be specified twice).
这种方法不需要JavaScript，不会导致IE中的ClearType文本丢失，并且兼容Firefox、Safari、Opera、IE6、7、8……不幸的是，它只适用于一行文本。如果您想要多行，请调整div.imageSub div'sheight和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>
回答by Jon Galloway
Definitely.
确实。
<div style="background-image: url(image.png);" >
<div style="position:relative; top:20px; left:20px;">
Some text here
</div>
</div>
回答by drs9222
<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>
回答by Ambuj Khanna
You can simply create an overlay by CSS only over any image.
您可以简单地通过 CSS 仅在任何图像上创建叠加层。
.container{
width:250px; height:250px;
}
.container img{width:100%;height:100%}
.container::before{
content:'';
position:absolute;
left:0;
top:0;
background:#fff;
z-index:9999;
width:100%;
height:100%;
opacity:0;
}<div class="container">
<img src="https://cdn4.buysellads.net/uu/1/8026/1535654409-Slack-pink_logo.png" alt="" border="0">
</div>