Question

以下是我的尝试：JSFIDDLE

因为我覆盖了一些现有的样式，我需要在box

后面添加一个半透明的面具

.box {
position:fixed;
background:red;
height:50%;
width:200px;
top:0;
left:0;
bottom:0;
right:0;
z-index:1000;
margin:auto;
}

.box:after {
content:"";
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
background:rgba(255,255,255,0.8);
z-index:999;
}

请参阅小提琴中的示例，我不明白为什么该框也被其:after风格所覆盖？

感谢您的关注！

Answer 1

因为:after伪元素定义之后 内容{x}}的伪内容。它是.box的伪子。因此，如果您的伪元素在DOM中真正定义，它将看起来像

.box

不喜欢这样：

<div class="box"> <p>some real content</p> <div class="box-after"></div> </div>

修改：
要解决此问题，您只需将<div class="box"> <p>some real content</p> </div> <div class="box-after"></div>的所有内部内容包装为另一个div。

.box

然后对CSS进行一些细微的更改，你会想出这个：http://jsfiddle.net/GA7GC/2/。

Answer 2

基于此答案（Full width background element with pseudo-class - z-index?），我设法仅使用CSS制作了全屏蒙版。

.dialog
{
	position: absolute;
	width: 90%;
	height: 80%;
	top:10%;
	margin: 0px auto;
	left: 0;
	right: 0;
	z-index: 2000;
	padding: 10px;
  color: white;
}


.dialog::before{
	content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  top:0;
  left:0;
	background: #464646;
	border-radius: 8px;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.5);
  z-index:-1;
}

.dialog::after{
	content: "";
  position: absolute;
  left: 50%;
  top: 0;
  height: 100vw;
  width: 100vw;
  transform: translate(-50%,-20%);
  z-index: -100;
  opacity: .7;
  background-color: tomato;
}

<div> text </div>
<div class="dialog">
This is dialog
</div>

使用：在CSS之后生成全屏掩码

2 个答案: