当前位置：首页 > news >正文

css的背景图和背景色混用；rgba和opacity区别

news 来源：原创 2025/5/18 20:28:22

文章目录

一、原因分析
二、解决方案
- - - 方法 1：使用 `background` 简写属性合并设置
    - 方法 2：通过伪元素叠加背景色
    - 方法 3：使用 `background-blend-mode` 混合模式
  - 验证步骤
  - 最终效果示意图
三、rgba和opacity区别

推荐方法1

在 CSS 中，同时设置 background-image 和 background-color 时，默认情况下背景图会覆盖背景色。要让背景色生效，需通过以下方法解决：

一、原因分析

覆盖层级：背景图的绘制层级高于背景色，若图片铺满元素（如 background-size: 100% 100%），则背景色会被完全遮挡。
透明度不生效：即使背景色使用 rgba 设置了透明度，若背景图无透明区域，颜色仍无法显示。

二、解决方案

方法 1：使用 `background` 简写属性合并设置

通过 background 属性同时声明背景色和背景图，确保颜色作为底层：

.parent {
  width: 1920px;
  height: 100%;
  background: 
    linear-gradient(rgba(29, 95, 164, 0.3), rgba(29, 95, 164, 0.3)), /* 模拟背景色 */
    url("@/assets/homeImg/bj.jpg") no-repeat;
  background-size: 100% 100%;
}

关键点：使用 linear-gradient 创建一个纯色层，与背景图叠加。

方法 2：通过伪元素叠加背景色

用 ::before 伪元素承载背景色，避免与背景图冲突：

.parent {
  position: relative; /* 为伪元素定位提供基准 */
  width: 1920px;
  height: 100%;
  background: url("@/assets/homeImg/bj.jpg") no-repeat;
  background-size: 100% 100%;
}

.parent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(29, 95, 164, 0.3);
}

关键点：伪元素的层级默认在父元素内容之下，但背景图之上。

方法 3：使用 `background-blend-mode` 混合模式

通过混合模式让颜色与图片叠加显示：

.parent {
  width: 1920px;
  height: 100%;
  background-image: 
    linear-gradient(rgba(29, 95, 164, 0.3), rgba(29, 95, 164, 0.3)),
    url("@/assets/homeImg/bj.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-blend-mode: overlay; /* 混合模式 */
}