如何在CSS中创建叠加层?

68

我想创建一个任意大小的 div,然后在该 div 上方显示某些内容。在 css 中如何最好地定位和调整叠加层的大小,使其与下方的 div 完全一致?

9个回答

117

您可以使用 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 hack 代替它来提供填充叠加层 div 的 base64 编码 PNG 背景图像。通过这种方式,我们可以避免 IE 应用透明度问题,即将透明度应用于子元素。


2
我不知道position:relative也适用于所有子元素 :O。非常感谢。 - Pieter Bos
你能让它更加跨浏览器兼容吗? - Greg
@Greg 由于IE的不透明度支持非常有限,并且它渗入div的子节点,因此您无法在div上获得清晰的不透明度,但是您可以通过使用添加了一些不透明度的png图像来解决这个问题。这里有一个演示,在所有浏览器中都应该可以正常工作(包括IE7+):http://jsfiddle.net/andresilich/g5jEr/ - Andres Ilich
8
我建议您使用“fixed”而不是“absolute”。这样,即使您向下滚动页面,覆盖层也会保持填充整个页面的状态。 - Nerian
使用top/right/bottom/left值而不是高度/宽度值为100%的优点是什么(如果有的话)? - Ads
显示剩余2条评论

15

虽然我来晚了,但如果你想使用纯 CSS 对任意元素进行此操作,而不必涉及定位、叠加 div 等等,你可以使用一个内嵌的盒子阴影:

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

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

例子:http://jsfiddle.net/jTwPc/


非常适用于不需要支持<=ie8的禁用按钮。 - barboaz

10

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

3
这里使用伪元素来创建覆盖层(例如:不需要添加更多标记即可实现)。

.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>


1
我建议使用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/


0

如果没有看到您当前的HTML和CSS示例,快速答案是使用z-index

CSS:

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

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

你也可以使用 position: absolute; 根据父级 div 的定位方式来确定位置。 - Daniel Hunter

0
如果您不介意使用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; }

0

我刚在codepen上试玩了一个类似的问题,这是我使用简单的CSS标记创建叠加层的方法。我创建了一个带有.class. box的div元素。在该div中,我创建了两个div,一个应用了.inner class,另一个应用了.notext class。.box div中这两个class都最初设置为display:none,但当.hovered over .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>

希望这有所帮助!:) 欢迎任何建议。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接