反应卡不显示背景

Question

我在 CSS 中添加了一个动画，其想法是当我将鼠标悬停在食物图像上时，它会向我显示其详细信息，如下所示：

但是当我添加css动画代码的一部分时，卡片的背景变得透明了。

如果我删除以下代码，它会显示第一张图片中描述的结果，将此结果写入第二张图片

 
 .stars, .twinkling, .clouds {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100%;
height:2400px;
display:block;
}

其余代码上传到 Github https://github.com/mareyam/Maryam-s-Restaurant

Answer 1

z-index 值存在问题，因为您的 Restaurant 组件不是 App 组件的子组件。 img 组件的 z-index 为 999，这就是您可以看到菜单图像的原因。但下面的细节块没有。您可以通过添加以下 CSS 规则来解决它：

.container-fluid {
   z-index: 4;
}

不过我建议避免使用过多的 z-index，因为它很难维护。始终尝试通过正确嵌套组件来解决此类问题。