CSS inset box-shadow不显示问题求助：背景图遮挡阴影？

你的判断完全正确，问题出在层级关系上：绝对定位的.game-card__background会默认渲染在父元素.game-card的内阴影上方，直接把阴影完全盖住了。下面是几种可行的解决方法：

方法1：给背景图设置负z-index #

通过降低背景图的层级，让它跑到父元素内阴影的下方：

.game-card__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    z-index: -1; /* 新增此行，将背景图层级降到父元素阴影之下 */
}

方法2：把内阴影移到背景图上 #

直接将内阴影属性加到背景图元素上，让阴影和背景图属于同一层：

.game-card {    
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 35px;
    border-radius: 10px;
    overflow: hidden;
    height: 53.5%;
    z-index: 2;
    /* 移除父元素的box-shadow */
}

.game-card__background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    object-fit: cover;
    box-shadow: 0px -183px 50px -35px rgba(0, 0, 0, 0.75) inset; /* 将阴影移到这里 */
}

方法3：用伪元素替代img做背景 #

如果可以调整HTML结构，用父元素的伪元素来承载背景图，这样父元素的内阴影能正常显示：

修改后的HTML： #

<section className={`game-card size_${size}`}>
    <div className='game-card__footer'>
        <div className='game-card__info'>
            <span className='game-card__name'>Planet of Lana</span>
            <ul className='game-card__tags'>
                { 
                    ['Adventure', 'Puzzle', 'Platformer'].map((text) => 
                    <li className='tags__tag'><Badge size={size}>{text}</Badge></li>    
                )}
            </ul>
        </div>
        <strong className='game-card__price'>Rp 165 999</strong>
    </div>
</section>

修改后的CSS： #

.game-card {    
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 35px;
    border-radius: 10px;
    overflow: hidden;
    height: 53.5%;
    z-index: 2;
    box-shadow: 0px -183px 50px -35px rgba(0, 0, 0, 0.75) inset;
}

.game-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
    background-image: url(${planetOfLanaBG}); /* 替换为你的图片路径 */
    background-size: cover;
    background-position: center;
    z-index: -1;
}

内容的提问来源于stack exchange，提问作者Kirill Murahovskiy