Html 如何在 css 中创建一个叠加层？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9724035/
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
How can one create an overlay in css?
提问by Pieter Bos
I'd like to create a div with an arbitrary size, then display something on top of that div. What is the best way to position and size the overlay exactly as the div below in css?
我想创建一个任意大小的 div，然后在该 div 之上显示一些内容。在 css 中完全按照下面的 div 定位和调整覆盖层大小的最佳方法是什么？
回答by Andres Ilich
You can use position:absoluteto position an overlay inside of your div and then stretch it in all directions like so:
您可以使用position:absolute在 div 内放置一个叠加层，然后像这样向各个方向拉伸它：
CSSupdated *
CSS更新 *
.overlay {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.85);
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent; /* ie fallback png background image */
z-index:9999;
color:white;
}
You just need to make sure that your parent div has the position:relativeproperty added to it and a lower z-index.
您只需要确保您的父 divposition:relative添加了该属性并降低了z-index.
Made a demo that should work in all browsers, including IE7+, for a commenter below.
为下面的评论者制作了一个适用于所有浏览器（包括 IE7+）的演示。
Removed the opacityproperty from the css and instead used an rGBA color to give the background, and only the background, an opacity level. This way the content that the overlay carries will not be affected. Since IE does not support rGBA i used an IE hack instead to give it an base64 encoded PNG background image that fills the overlay div instead, this way we can evade IEs opacity issue where it applies the opacity to the children elements as well.
opacity从 css 中删除了该属性，而是使用 rGBA 颜色为背景提供了不透明度级别，并且只有背景。这样覆盖层承载的内容不会受到影响。由于 IE 不支持 rGBA，我使用 IE hack 来给它一个 base64 编码的 PNG 背景图像来填充覆盖层 div，这样我们就可以避免 IE 的不透明度问题，它也将不透明度应用于子元素。
回答by Alex
CSS:
CSS：
#box{
border:1px solid black;
position:relative;
}
#overlay{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-color:rgba(255,255,0,0.5);
}
回答by user1002973
I'm late to the party, but if you want to do this to an arbitrary element using only CSS, without messing around with positioning, overlay divs etc., you can use an inset box shadow:
我迟到了，但是如果您想仅使用 CSS 对任意元素执行此操作，而不想弄乱定位、覆盖 div 等，则可以使用插入框阴影：
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
This will work on any element smaller than 4000 pixels long or wide.
这适用于任何小于 4000 像素长或宽的元素。
example: http://jsfiddle.net/jTwPc/
回答by Ben Sinclair
If you don't mind messing with z-index, but you want to avoid adding extra div for overlay, you can use the following approach
如果您不介意弄乱 z-index，但又想避免为叠加添加额外的 div，则可以使用以下方法
/* make sure ::before is positioned relative to .foo */
.foo { position: relative; }
/* overlay */
.foo::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
z-index: 0;
}
/* make sure all elements inside .foo placed above overlay element */
.foo > * { z-index: 1; }
回答by Dorian
Here is an overlay using a pseudo-element (eg: no need to add more markup to do it)
这是一个使用伪元素的覆盖（例如：不需要添加更多标记来做到这一点）
.box {
background: 0 0 url(http://ianfarb.com/wp-content/uploads/2013/10/nicholas-hodag.jpg);
width: 300px;
height: 200px;
}
.box:after {
content: "";
display: block;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
} <div class="box"></div>回答by Abhishek Singh
I was just playing around with a similar problem on codepen, this is what I did to create an overlay using a simple css markup. I created a div element with class .box applied to it. Inside this div I created two divs, one with .inner class applied to it and the other with .notext class applied to it. Both of these classes inside the .box div are initially set to display:none but when the .box is hovered over, these are made visible.
我只是在 codepen 上遇到类似的问题，这就是我使用简单的 css 标记创建叠加层所做的工作。我创建了一个应用了类 .box 的 div 元素。在这个 div 中，我创建了两个 div，一个应用了 .inner 类，另一个应用了 .notext 类。.box div 中的这两个类最初都设置为 display:none 但是当 .box 悬停在上面时，它们就会变得可见。
.box{
height:450px;
width:450px;
border:1px solid black;
margin-top:50px;
display:inline-block;
margin-left:50px;
transition: width 2s, height 2s;
position:relative;
text-align: center;
background:url('https://upload.wikimedia.org/wikipedia/commons/c/cd/Panda_Cub_from_Wolong,_Sichuan,_China.JPG');
background-size:cover;
background-position:center;
}
.box:hover{
width:490px;
height:490px;
}
.inner{
border:1px solid red;
position:relative;
width:100%;
height:100%;
top:0px;
left:0px;
display:none;
color:white;
font-size:xx-large;
z-index:10;
}
.box:hover > .inner{
display:inline-block;
}
.notext{
height:30px;
width:30px;
border:1px solid blue;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
display:none;
}
.box:hover > .notext{
background-color:black;
opacity:0.5;
display:inline-block;
}<div class="box">
<div class="inner">
<p>Panda!</p>
</div>
<div class="notext"></div>
</div>Hope this helps! :) Any suggestions are welcome.
希望这可以帮助！:) 欢迎任何建议。
回答by Daniel Hunter
Quick answer without seeing examples of your current HTML and CSS is to use z-index
没有看到当前 HTML 和 CSS 示例的快速回答是使用 z-index
css:
css：
#div1 {
position: relative;
z-index: 1;
}
#div2 {
position: relative;
z-index: 2;
}
Where div2 is the overlay
其中 div2 是叠加层
回答by Undefined
I would suggest using css attributes to do this. You can use position:absolute to position an element on top of another.
我建议使用 css 属性来做到这一点。您可以使用 position:absolute 将一个元素定位在另一个元素的顶部。
For example:
例如：
<div id="container">
<div id="on-top">Top!</div>
<div id="on-bottom">Bottom!</div>
</div>
and css
和CSS
#container {position:relative;}
#on-top {position:absolute; z-index:5;}
#on-bottom {position:absolute; z-index:4;}
I would take a look at this for advice: http://www.w3schools.com/cssref/pr_class_position.asp
我会看看这个建议：http: //www.w3schools.com/cssref/pr_class_position.asp
And finally here is a jsfiddle to show you my example
最后这里是一个 jsfiddle 向你展示我的例子
