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

东莞模块网站建设公关团队

wzjs 2025/8/23 1:07:01

东莞模块网站建设,公关团队,wordpress 拖拉验证,做教育的网站有哪些内容吗文章目录一、原因分析二、解决方案方法 1：使用 background 简写属性合并设置方法 2：通过伪元素叠加背景色方法 3：使用 background-blend-mode 混合模式验证步骤最终效果示意图三、rgba和opacity区别推荐方法1 在 CSS 中，同时…

文章目录

一、原因分析
二、解决方案
- - - 方法 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; /* 混合模式 */
}