在css中渐变叠加多层背景-css教程-PHP中文网

在css中渐变叠加多层背景

P粉602998670

发布： 2025-10-27 21:47:01

原创

472人浏览过

CSS多重背景按声明顺序从上到下堆叠，先写的在最上层；通过逗号分隔多个背景值（颜色、图片、渐变），可独立设置background-size、position和repeat；示例中线性渐变叠加背景图增强文字可读性，或多层渐变营造层次感，配合background-blend-mode实现自然融合。

在css中渐变叠加多层背景

在 CSS 中，你可以通过 多重背景 实现渐变叠加多层背景效果。浏览器会按照声明顺序从上到下堆叠背景：最先写的背景在最上面，最后写的在最底层。

语法结构

CSS 允许你用逗号分隔多个背景值，包括颜色、图片和渐变。每个背景可以包含渐变、图像或纯色，并支持独立的 background-size、background-position 和 background-repeat 设置。

示例：渐变叠加图片背景

你想在一个背景图上叠加一个线性渐变，使文字更清晰可读：

立即学习“前端免费学习笔记（深入）”；

.overlay-gradient {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)), /* 上层：从半透明黑到深黑的渐变 */
    url('bg-image.jpg'); /* 下层：实际背景图 */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 400px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

登录后复制

这里，黑色透明渐变覆盖在图片之上，增强文字对比度。

度加剪辑

度加剪辑（原度咔剪辑），百度旗下AI创作工具

查看详情

叠加多个渐变

你也可以叠加多个渐变，比如创建光影或纹理效果：

.multiple-gradients {
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 255, 0, 0.4), transparent 20%), /* 黄色光斑 */
    linear-gradient(135deg, transparent, rgba(0, 0, 255, 0.2)), /* 蓝色调斜向渐变 */
    linear-gradient(to bottom, #ff7a7a, #d64545); /* 底层主渐变：红粉色系 */

  height: 400px;
  background-size: cover;
}

登录后复制

这个例子中，三个渐变叠加营造出有层次感的视觉效果。

实用技巧

确保渐变写在前面，如果你希望它覆盖在图片或其他背景之上。
使用 rgba() 或 hsla() 控制颜色透明度，让底层内容透出来。
配合 background-blend-mode 可以实现混合模式（如 multiply、overlay），创造更丰富的色彩融合。

示例：使用 blend mode 混合渐变与图像

.blend-mode-example {
  background: 
    linear-gradient(to top, #333, transparent),
    url('landscape.jpg');
  background-blend-mode: overlay; /* 让渐变与图片融合得更自然 */
  background-size: cover;
  height: 300px;
}

登录后复制

基本上就这些。只要掌握书写顺序和透明度控制，就能灵活实现各种渐变叠加背景效果。

以上就是在css中渐变叠加多层背景的详细内容，更多请关注php中文网其它相关文章！