怎样才能在CSS中创build一个覆盖？
我想创build一个任意大小的div，然后在div的顶部显示一些东西。 在CSS中定位和调整叠加层的最佳方式是什么？
你可以使用position:absolute在你的div里面放置一个覆盖层，然后像这样在所有的方向上拉伸它：
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\9; /* ie fallback png background image */ z-index:9999; color:white; }
你只需要确保你的父div有position:relative属性添加到它和一个较低的z-index 。
做一个演示，应该可以在所有的浏览器，包括IE7 +，为一个评论下面。
演示
从CSS删除opacity属性，而不是使用rGBA颜色给背景，只有背景，不透明度水平。 这样叠加的内容不会受到影响。 由于IE不支持rGBA，我使用了一个IE黑客，而不是给它一个base64编码PNG背景图像，而不是填充覆盖div，这样我们就可以避免IE不透明的问题，它也适用于不透明的儿童元素。
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); }
我迟到了派对，但是如果你想用一个只使用CSS的任意元素来做到这一点，而不需要搞乱定位，覆盖div等等，你可以使用一个embedded框阴影：
box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);
这将适用于任何小于4000像素长或宽的元素。
例如： http : //jsfiddle.net/jTwPc/
没有看到你当前的HTML和CSS的例子，快速回答是使用z-index
CSS：
#div1 { position: relative; z-index: 1; } #div2 { position: relative; z-index: 2; }
div2是叠加层
我会build议使用CSS属性来做到这一点。 您可以使用position：absolute将元素放置在另一个元素的顶部。
例如：
<div id="container"> <div id="on-top">Top!</div> <div id="on-bottom">Bottom!</div> </div>
和CSS
#container {position:relative;} #on-top {position:absolute; z-index:5;} #on-bottom {position:absolute; z-index:4;}
我会看看这个build议： http : //www.w3schools.com/cssref/pr_class_position.asp
最后这里是一个jsfiddle向你展示我的例子
如果你不介意搞乱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; }
这是一个覆盖使用伪元素（例如：不需要添加更多的标记来做到这一点）
.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>
我只是在codepen上玩弄类似的问题，这是我用一个简单的css标记来创build覆盖。 我创build了一个类的.box应用于它的div元素。 在这个div里面，我创build了两个div，其中一个应用了.inner类，另一个应用了.notext类。 .box div中的这两个类最初都被设置为display：none，但是当.boxhover时，这些类都是可见的。
.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>
