Question

你好我有一个包含一些内容的盒子。我设置了一个psuedo :before元素，以便在悬停时显示。此伪造元素是覆盖整个框设置为背景图像的图像。它可以工作，但它会将框中的内容推到框下方。我想它，所以内容在悬停时保持不变，内容出现在psuedo元素上。

＆＃13;

.box {
  width: 200px;
  height: 200px;
  background-color: #333;
}
.box p {
  color: green;
}
.box:before {
  content: '';
  background: url('https://ewans.files.wordpress.com/2008/07/grey1.jpg');
  width: 200px;
  height: 200px;
}
.box:hover:before {
  display: block;
}

＆＃13;

<div class="box">
  <p>content content content</p>
</div>

＆＃13;

这是jsfiddle链接

jsfiddle

有没有办法让这个伪背景图像不推送内容？我希望内容保留在psuedo元素之上的相同位置。（内容未被伪造元素覆盖）

另外，您可能会问为什么不在悬停时更改框的背景颜色。这是因为背景图像是自定义图像，我只是以灰色图像为例。

由于

Answer 1

这样做，你定位伪绝对。

＆＃13;

<div class="box">
    <p>content content content</p>
</div>

＆＃13;

{{1}}

＆＃13;

Answer 2

尝试：

.box{
   width: 200px;
   height: 200px;
   background-color: #333;
   position: relative;
}

.box:before{
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  background: /* your image here */
  z-index: -1;
}

防止psuedo元素推送内容

2 个答案: