0

这是我的尝试：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;
}

看fiddle中的sample，不明白为什么box也被它的:afterstyle覆盖了？

感谢您的关注！

4

2 回答 2

3

因为伪元素定义了:after一个伪内容，就是在真实内容之后.box。它是. _ .box因此，如果您的伪元素真的在 DOM 中定义，它看起来像

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

编辑：
要解决问题，您可以简单地.box用另一个 div 包装所有内部内容。

<div class="box">
    <div class="inner-box">inner content</div>
</div>

然后对 CSS 做一些小的改动，你会想出这个：http: //jsfiddle.net/GA7GC/2/。

于 2013-10-15T08:04:49.890 回答
1

基于这个答案（带有伪类的全宽背景元素 - 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>

于 2019-08-23T19:09:18.453 回答