如何在 CSS 中创建叠加层？答案

【问题标题】：How can one create an overlay in css?如何在 CSS 中创建叠加层？
【发布时间】：2012-03-15 16:31:51
【问题描述】：

我想创建一个任意大小的 div，然后在该 div 上显示一些东西。在 css 中完全按照下面的 div 定位和调整叠加层的最佳方法是什么？

【问题讨论】：

标签： html css

【解决方案1】：

您可以使用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+）的演示。

Demo

从 css 中删除了 opacity 属性，而是使用 rGBA 颜色来为背景（并且只有背景）提供不透明度级别。这样叠加层承载的内容就不会受到影响。由于 IE 不支持 rGBA，因此我使用 IE hack 来给它一个 base64 编码的 PNG 背景图像来填充覆盖 div，这样我们就可以避免 IE 的不透明度问题，即它也将不透明度应用于子元素。

【讨论】：

我不知道 position:relative 也适用于所有孩子：O。非常感谢
你能让它更跨浏览器兼容吗？
@Greg 由于 IE 的不透明度支持非常稀疏，并且它渗透到 div 的子节点中，因此您无法在 div 上获得干净的不透明度，但您可以通过使用 png 来解决这个问题添加了一些不透明度的图像，这是一个应该适用于所有浏览器（包括 IE7+）的演示：jsfiddle.net/andresilich/g5jEr
我建议您使用fixed 而不是“绝对”。这样，即使您向下滚动，叠加层也会继续填充页面。
如果有的话，使用上/右/下/左值而不是 100% 的高度/宽度值的优势是什么。

【解决方案2】：

我迟到了，但如果你想只使用 CSS 对任意元素执行此操作，而不用搞乱定位、覆盖 div 等，你可以使用插入框阴影：

box-shadow: inset 0px 0px 0 2000px rgba(0,0,0,0.5);

这适用于长度或宽度小于 4000 像素的任何元素。

示例：http://jsfiddle.net/jTwPc/

【讨论】：

非常适合不需要支持

【解决方案3】：

http://jsfiddle.net/55LNG/1/

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);
}

【讨论】：

【解决方案4】：

这是一个使用伪元素的叠加层（例如：无需添加更多标记即可）

.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);
}

  &lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

在不查看当前 HTML 和 CSS 示例的情况下快速回答是使用 z-index

css:

#div1 {
position: relative;
z-index: 1;
}

#div2 {
position: relative;
z-index: 2;
}

div2 是叠加层

【讨论】：

也可以使用 position: absolute;取决于您的父 div 的位置。

【解决方案6】：

我建议使用 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;}

我会看看这个以获得建议： http://www.w3schools.com/cssref/pr_class_position.asp

最后这里是一个 jsfiddle 向你展示我的例子

http://jsfiddle.net/Wgfw6/

【讨论】：

【解决方案7】：

如果你不介意弄乱z-index，但又想避免为overlay添加额外的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; }

【讨论】：

【解决方案8】：

我只是在 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>

希望这会有所帮助！ :) 欢迎提出任何建议。

【讨论】：

【解决方案9】：

div{
  background-image:url('');
  background-size:cover;
  background-position:top center;
  position:relative;
}

div:before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  height:100%;
  width:100%;
  background-color:rgba(0,0,0,0.7);
}

【讨论】：