我正在尝试创建主卡，我想要在它后面有一条垂直线。当我在主卡上使用背景滤镜时，效果很好。但是当我把它放在它的父元素上时::before伪元素出现在主卡前面。我什至无法用 z-index 解决这个问题。
我在 Firefox 上尝试过这个，但我必须为父级和子级添加背景过滤器，然后这才有效
这是代码：-
:root {
--white: #fff;
--gold: rgb(255, 215, 0);
--bg-color: rgba(255, 0, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-image: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.3)
),
url("https://images.pexels.com/photos/460635/pexels-photo-460635.jpeg?auto=compress&cs=tinysrgb&dpr=1");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 1rem;
}
.container {
display:flex;
justify-content:center;
align-items:center;
width: 50%;
height:90vh;
margin:2rem;
padding: 5rem;
box-shadow: 0px 0px 3px var(--gold), 0px 0px 3px var(--gold);
border: 0.1rem solid var(--gold);
border-radius: 3rem;
position: relative;
backdrop-filter: blur(1rem);
&::before {
content: "";
position: absolute;
top: 0;
left: 50%;
translate: -50% 0%;
width: 0.2rem;
height: 100%;
background-color: var(--gold);
}
.master-card {
text-transform: capitalize;
color: var(--white);
width: 100%;
aspect-ratio: 2/1;
/*backdrop-filter: blur(1rem);*/
background-color: var(--bg-color);
border: none;
border-radius: inherit;
padding: 2.5rem;
box-shadow: inherit;
display: flex;
& .brand-bg {
width: 10%;
aspect-ratio: 1;
border-radius: 50%;
}
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Master card</title>
</head>
<body>
<div class="container">
<div class="master-card">
<div class="left-side">
<div class="brand">
<span class="brand-bg"></span><span class="brand-bg"></span>
<h2>master card</h2>
</div>
<div class="info">
<p>card number</p>
<p>8050 5040 2030 3020</p>
</div>
<p>prem kumar shahi</p>
</div>
<div class="right-side"></div>
</div>
</div>
</body>
</html>由于background-filter创建了一个新的堆叠上下文，因此无法将其子级（
::before在您的情况下，您必须添加一个包装器并使用该包装器应用伪元素垂直线：
:root {
--white: #fff;
--gold: rgb(255, 215, 0);
--bg-color: rgba(255, 0, 255, 0.2);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
background-image: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("https://images.pexels.com/photos/460635/pexels-photo-460635.jpeg?auto=compress&cs=tinysrgb&dpr=1");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100vh;
padding: 1rem;
}
.wrapper {
width: 50%;
margin: 2rem;
&::before {
content: "";
position: absolute;
top: 0;
left: 50%;
translate: -50% 0%;
width: 0.2rem;
height: 100%;
background-color: var(--gold);
}
}
.container {
height: 90vh;
padding: 5rem;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0px 0px 3px var(--gold), 0px 0px 3px var(--gold);
border: 0.1rem solid var(--gold);
border-radius: 3rem;
backdrop-filter: blur(1rem);
.master-card {
text-transform: capitalize;
color: var(--white);
width: 100%;
aspect-ratio: 2/1;
/*backdrop-filter: blur(1rem);*/
background-color: var(--bg-color);
border: none;
border-radius: inherit;
padding: 2.5rem;
box-shadow: inherit;
display: flex;
& .brand-bg {
width: 10%;
aspect-ratio: 1;
border-radius: 50%;
}
}
}<body>
<div class="wrapper">
<div class="container">
<div class="master-card">
<div class="left-side">
<div class="brand">
<span class="brand-bg"></span><span class="brand-bg"></span>
<h2>master card</h2>
</div>
<div class="info">
<p>card number</p>
<p>8050 5040 2030 3020</p>
</div>
<p>prem kumar shahi</p>
</div>
<div class="right-side"></div>
</div>
</div>
</div>
</body>