我的背景图像与 card::after 重叠，我试图将 card::after 分配到 card 类后面，但是当背景图像渲染时我看不到 card::after 类，我为 .background-image 添加了 z-index:0，为 .card 添加了 z-index:1，为 .card::after 伪类添加了 z-index:-1
我需要背景位于 .card::after 后面，而 .card::after 位于 card 后面。请参考下面的图片和代码
在背景图像呈现之前按预期显示 .card::after
背景图像渲染后不显示 .card::after
.image-wrapper {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.background-img {
width: 100vw;
height: 100vh;
background-size: 100%;
z-index: 0;
}
.overlay-text {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 3rem;
font-weight: 900;
text-shadow: 1px 1px 2px #000;
border: 1px solid #FF5733;
background-color: #FF5733;
padding: 0 6rem;
border-radius: 10px;
}
.sticky-notes {
position: absolute;
top: 25%;
left: 0;
right: 0;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
padding: 20px;
max-width: 1600px; /* Controls how wide the card row is */
justify-content: center;
cursor: pointer;
}
.card {
width: 250px;
height: 250px;
color: white;
border-radius: 12px;
padding: 16px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
font-family: 'Arial', sans-serif;
position: relative;
z-index: 2; /* Ensures the card is above the background image */
}
.card::after{
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 14px; /* slightly more than the card to match the curve */
background: red;
z-index: -1; /* behind the card */
}
.appreciator, .text{
font-weight: 400;
font-size: 0.8rem;
white-space: nowrap; /* Prevents text from wrapping */
overflow: hidden;
}
.avatar img {
width: 64px;
height: 64px;
border-radius: 50%;
margin: 0 auto;
}
.appreciate-text{
font-size: 1.3rem;
font-weight: 700;
text-align: center;
margin-top: 10px;
}
.icon-buttons {
display: flex;
justify-content: center;
gap: 30px; /* space between like & comment icons */
margin-top: 10px;
}
.navigation-buttons {
position: absolute;
top: 50%;
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 30px;
transform: translateY(-50%);
pointer-events: none; /* allows click-through by default */
}
.arrow-button {
background-color: orangered;
color: white;
font-size: 2rem;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
cursor: pointer;
pointer-events: auto; /* re-enables interaction on buttons */
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.arrow-button:hover {
background-color: rgba(0, 0, 0, 0.8);
} <div class="image-wrapper">
<img src={backgroundImageUrl} alt="background" class="background-img" />
<div class="overlay-text">
<h1>WALL OF FAME</h1>
</div>
<div class="create-appreciation">
<lightning-button label="Create Appreciation" variant="brand" onclick={handleCreateAppreciation} class="create-button"></lightning-button>
</div>
</div>
<div class="navigation-buttons">
<lightning-button-icon icon-name="utility:arrow_left" alternative-text="Delete" variant="bare-inverse" size="large" class="arrow-button left-arrow"></lightning-button-icon>
<lightning-button-icon icon-name="utility:arrow_right" alternative-text="Delete" variant="bare-inverse" size="large" class="arrow-button left-arrow"></lightning-button-icon>
</div>
<div class="sticky-notes">
<template for:each={appreciations} for:item="note">
<div key={note.Id} class="card" style={note.style}>
<div class="note-content">
<h2 class="appreciator">{note.name}</h2>
<div class="avatar">
<img src="https://www.lightningdesignsystem.com/assets/images/avatar2.jpg" alt="avatar" />
</div>
<div class="text">is appreciated</div>
<div class="appreciate-text">{note.appreciated}</div>
</div>
<div> <div class="icon-buttons">
<lightning-button-icon icon-name="utility:like" alternative-text="Delete" title="Delete" onclick={handleDelete} data-id={note.Id} class="delete-button"></lightning-button-icon>
<lightning-button-icon icon-name="utility:comments" alternative-text="Delete" title="Delete" onclick={handleDelete} data-id={note.Id} class="delete-button"></lightning-button-icon>
</div>
</div>
</div>
</template>
</div> 
