如何为背景图片添加透明蓝色，避免文本随背景变淡？

你的问题出在两个点：全局opacity会让子元素（文字）一起透明，同时background-color被background-image覆盖无法显示。以下是修正方案：

核心思路 #

• 移除全局opacity，改用背景层叠加半透明颜色的方式，只让背景区域带透明度，文字不受影响
• 通过渐变或混合模式让透明蓝色与背景图结合生效

修改后的完整代码 #

HTML（结构无需改动）

<div className="home">
     <h1>Home page</h1>
     <p className="home-text"> Text </p>
</div>

CSS（两种可选方案）

方案一：渐变叠加（兼容性好，效果可控）

.home{
    /* 用半透明蓝色渐变层叠加在背景图上方 */
    background: linear-gradient(rgba(0, 109, 181, 0.7), rgba(0, 109, 181, 0.7)), url('../assets/home.jpg');
    background-size: cover;
    height: 100vh;
    color: rgb(241, 241, 241);
}

.home-text{
  color: #fdfdfd;
}

方案二：背景混合模式（写法简洁）

.home{
    background-color: rgba(0, 109, 181, 0.7);
    background-image: url('../assets/home.jpg');
    /* 让颜色与背景图混合显示 */
    background-blend-mode: overlay;
    background-size: cover;
    height: 100vh;
    color: rgb(241, 241, 241);
}

.home-text{
  color: #fdfdfd;
}

说明 #

• rgba(0, 109, 181, 0.7)里的最后一位0.7就是透明度，可根据需求调整（0为完全透明，1为完全不透明）
• 两种方案都能实现「背景图+透明蓝色」的效果，且文字保持纯白不褪色

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