0

我有一个div，它有一个背景图像。但我终于明白，我忘记div了底部的另一个背景。所以我使用了:after伪并插入了一个。

进入的背景:after应该是一个透明的图像，可以很好地与身体的背景一起褪色。但是现在父级的背景div正在落后于:after伪元素中的内容。

有什么办法可以让父级的背景div不在我的:after伪元素中显示？

编辑 这里是我的代码

.foo{
    height: 30px;
    padding-bottom: 20px;
    background: url(i/myimage.png) no-repeat;
}
.foo:after{
    display: block;
    position: absolute;
    right: 0;
    background: url(i/pseudo-elem-bg.png) no-repeat;
    content: ' ';
    height: 20px; /*takes the bottom padding
}
4

2 回答 2

0

::after伪元素添加了一个元素，它是父选择器的最后一个子元素，而不是兄弟元素（因此，在selected之后的元素），因此如果子背景为 ，则显示父元素的背景是很自然的transparent。

您可能需要使用伪元素以外的其他解决方案，例如真实元素。查看您拥有的当前代码可能有助于为您的案例找到最佳解决方案。

于 2013-04-10T17:24:00.697 回答
0

如果您创建伪元素只是为了添加另一个背景，您可以设置多个背景，它们将按照您设置的顺序显示。

就像是：

div {
  background: url(bg.png),
              url(otherbg.png);
  background-position: center top,
                       center bottom;
}

您可以使用其他背景属性并以相同的方式对其进行排序。

于 2013-04-10T17:24:54.117 回答