CSS cross-fade() 实现半透明背景图

八月 27, 2023 / Mr.x / 7阅读 / 0评论/ 分类: 实用创意
CSS cross-fade() 实现半透明背景图 — 荣小站
前端 CSS 技巧

CSS cross-fade() 实现半透明背景图

现在许多博客都采用了半透明背景样式，好看也简洁。本文介绍一种新的 CSS 方法来实现这个效果。

描述

现在许多的博客都采用了半透明背景这种样式，好看也简洁，那么接下来进行实现吧！

CSS cross-fade() 函数可以在规定的透明性混合两个图像。它可以用于许多简单的图像处理，例如使用纯色为图像着色或通过将图像与径向渐变组合来突出显示页面的特定区域。

方法一：伪元素方案（传统方法）

这是很多博客都采用的一种方式：

.app {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--background-color);
  background-image: url("./assets/images/background.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0.4;
}

⚠️ 缺点：该方法使用伪元素，在伪元素上设置背景图并调整透明度，成本更高，会创建层叠上下文，看起来也不够优雅。

方法二：cross-fade() 函数（新方案）

1. cross-fade() 语法

cross-fade(<image>, <image>, <percentage>)

其中 <percentage> 指的是透明度，只会改变第 2 个图像的透明度：

  • cross-fade(url(a.png), url(b.png), 0%) → 全显示第1张图
  • cross-fade(url(a.png), url(b.png), 100%) → 全显示第2张图
  • cross-fade(url(a.png), url(b.png), 50%) → 50:50 混合

2. 具体实现

要实现半透明背景图效果，只需要第 1 张图使用透明图片，第 2 张图使用背景图：

.app {
  min-height: 100vh;
  overflow-x: hidden;
  background-color: #faf8f5;  /* 底色 */
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  
  /* 透明 GIF（1px 透明图） */
  --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
  
  /* 使用 cross-fade 实现半透明背景 */
  background-image: cross-fade(
    var(--transparent),
    url("./assets/images/background.jpg"),
    15%  /* 透明度控制 */
  );
  
  /* Safari 兼容 */
  background-image: -webkit-cross-fade(
    var(--transparent),
    url("./assets/images/background.jpg"),
    15%
  );
}

💡 核心优势：cross-fade() 本质上就是一个 <image> 图像数据类型，和 url() 图像、gradient 渐变图像、image-set() 函数是一个性质。因此，使用 cross-fade() 函数替换 url() 函数实现背景图片的半透明效果是成本最低、效果最好的方法。

参数调节

参数作用
底色background-color 设置，作为兜底背景
15%背景图的透明度，可根据需要调整（推荐 10%-30%）
transparent1px 透明 GIF 作为第一层图像

兼容性

  • Safari：新版本已经不需要私有前缀了
  • Chrome：想支持该函数依旧需要添加前缀 -webkit-

⚠️ 注意：该函数对于生产环境还是需要谨慎使用，建议先在项目中充分测试。

#CSS cross-fade() 实现半透明背景图(1)

评论