如何用CSS让背景图上方的菜单元素不显示背景图？

问题分析 #

你当前的代码中，.menu 使用了半透明的 rgba 背景色，这种背景会让下方 body 的背景图片透出来。要实现菜单盒子显示半透明背景但不透出背景图，可通过以下两种方法解决：

方法一：使用伪元素创建独立背景层 #

通过给 .menu 添加伪元素，让伪元素作为半透明背景层并置于菜单内容下方，这样就能挡住 body 的背景图片，同时不影响菜单内容的显示：

body{
    font-family: sans-serif;
    background-image: url("coffee_beans.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.menu{
    position: relative;
    border: 2px solid red;
    max-width: 613px;
    width: 100%;
    margin: auto;
    /* 移除原来的 background-color */
}
.menu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 189, 109, 0.395);
    z-index: -1; /* 让伪元素在菜单内容下方 */
}

方法二：使用不透明底色叠加半透明背景（视觉等效） #

如果你不需要菜单背景真正“透明”，仅追求视觉上的半透明效果，可以给 .menu 添加不透明底色后设置整体透明度：

body{
    font-family: sans-serif;
    background-image: url("coffee_beans.jpeg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}
.menu{
    position: relative;
    border: 2px solid red;
    max-width: 613px;
    width: 100%;
    margin: auto;
    background-color: #fff; /* 不透明底色 */
    opacity: 0.395; /* 整体透明度，会影响内部所有内容 */
}

⚠️ 注意：这种方法会让菜单内的文字、边框等所有元素都变得半透明，若只想让背景半透明，优先选择方法一。

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