Question

我创建了一个div，其中包含img和一些文字。我希望:before伪元素完全覆盖父div，但我不知道如何做到这一点。

.container {
    display:inline-block;
    width:33%;
    padding:15px;
    box-sizing:border-box;
    border:2px solid blue;
}
.container:before {
    content:"";
    background-color:green;
    width:100%;
    height:100%;
    display:block;
    transition:all 0.3s ease 0s;
    z-index:2;
}
.container img {
    max-width:100%;
}
.container h2 {
    font-size:1.5em;
    font-style:normal;
    text-decoration:none;
    font-weight:400;
}

<div class="container">
    <h2>Lorem ipsum</h2>
    <img alt="" src="http://lorempixel.com/400/300">
</div>

Answer 1

执行以下操作。

将position: relative;添加到.container
然后将这些行添加到.container:before：
```
position: absolute;
top: 0;
left: 0;
```

Answer 2

这是我的答案：

https://jsfiddle.net/2y6uh3j6/4/

主要见解：

您需要在父容器中建立定位上下文。这是通过在position: relative

.container

使用position: absolute; top: 0; left: 0; right: 0; bottom: 0;（允许您放弃height和width）可以使填充问题边缘化。

Answer 3

您只需要在父元素和：元素之前添加定位。虽然我不确定你打算用红色叠加做什么。

http://jsfiddle.net/basyqLv8/

.container {
    position:relative;

.container:before {
    position: absolute;
    top: 0;
    left: 0;

使伪元素完全覆盖父容器？

3 个答案: