Question

我是HTML和CSS的新手，在做一些练习时，我遇到了一个问题，就是我想创建具有模糊效果的网站，因此我创建了带有类展示的标题，并在内部创建了带有类的div的标题。内容。

<header class="showcase">
        <div class="content">
<img src="img/pexels-photo-373912.jpeg" alt="Photo">
<h2 class="title">Welcome </h2>
<p class="text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, quidem!</p>
        </div>
    </header>

然后使用css ::在伪元素之后创建背景图像：

.showcase::after{
    content:"";
    background-image: url(img/action-america-architecture-378570.jpg);
    background-size:cover;
background-position: center;
height: 100vh;
filter: blur(10px);
display: block;
transition: 1000ms;

}

所以，问题是当我将具有类内容的div的位置更改为绝对

时

.content{
    position: absolute;
}

然后将div放在:: background-image之后。据我所知，:: after或:: before在默认情况下具有静态位置，因此它必须在.content之后与position：absolute相反。我说得对吗？

Answer 1

在内容类中使用z-index属性，并且必须大于零，默认为零。

.content{
position: absolute;
z-index:2;
}

为什么将具有position：absolute的元素放在:: after伪元素之后

1 个答案: