html - 制作一个伪元素来完全覆盖父容器？

Question

我创建了一个 div，里面有一个 img 和一些文本。我希望 :before 伪元素完全覆盖父 div，但我不知道该怎么做。

jsfiddle demo

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