z-index 不适用于带有 ::before 的 div答案

【问题标题】：z-index not working on a div with ::beforez-index 不适用于带有 ::before 的 div
【发布时间】：2022-11-25 03:21:32
【问题描述】：

我有一张用 html/css 设计的卡片，想在卡片上应用渐变边框。这是我那张卡片的 html 代码。

                     <div class="col">
                       <div class="p-3 package_card">
                        <picture>
                            <source srcset="">
                            <img src="images/coloseum.jpg" alt="">
                        </picture>
                        <div class="package_card_text">
                            <div class="card_title">
                                <div class="text_left">
                                    <h5 class="title">Abgokim Waterfalls</h5>
                                    <p class="caption"><ion-icon name="location-outline"> 
                                    </ion-icon> Nigeria, cross river state</p>
                                </div>
                                <div class="text_right">
                                    <ion-icon name="heart-outline"></ion-icon
                                    <span>4320</span>
                                </div>
                            </div>
                            <div class="card_desc">
                                <p>desicription about the image</p>
                                <a href="#" class="join-btn">Join Community</a>
                            </div>
                        </div>
                       </div>
                      </div>

现在为了创建渐变边框，我使用 ::before 伪元素。这是我的卡片和伪选择器的 CSS 代码。

.package_card{
    position: relative;
    background-color:black;
    backdrop-filter: blur(39px);
    width: 100%;
    border-radius: 8px;
}
.package_card::before{
    content:"";
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    background: var(--white-70);
    z-index:-1;
}

现在的问题是，z-index: -1; 伪元素被转移到卡片内容（如 img 和文本）后面，而不是卡片本身。

这是屏幕截图。

我做错了什么。请帮忙。

【问题讨论】：

标签： html css web responsive-design web-site-project

【解决方案1】：

我认为这是因为::before 没有落后于其父组件的background。

您可以尝试设置另一个 ::after 并为此元素提供一个 background，这将覆盖内容区域并允许 ::before 用作渐变边框。

但是这个工具会让卡片上的backdrop-filter: blur(39px)没有效果（因为::before覆盖了背景）。因此，如果卡片还需要为其背后的其他元素显示模糊效果，则可能需要对实现进行一些更改。

例子：

.package_card::after {
  content: "";
  /* ? Edit to preferred background color for card */
  background: #000;
  position: absolute;
  inset: 0;
  z-index: -1;
}

【讨论】：