02 半透明背景图实现

時雨发现许多个人博客主题都有半透明背景图的设计，而咱也不例外，从之前的 Aurora 到现在的 ZERO，一直沿袭着半透明背景图的设计风格点缀。而这天，時雨发现了一种新的实现方式。
旧方法
先来看看之前的半透明背景图实现：
.app {
  @apply min-h-screen overflow-x-hidden;
}
​
.app::before {
  @apply fixed top-0 left-0 w-screen h-screen bg-fixed bg-center bg-cover bg-no-repeat;
  content: "";
  z-index: -1;
  opacity: 0.4;
  background-color: var(--background-color);
  background-image: url("./assets/images/background.jpg");
}
这个方法是時雨看到的几乎全部博客的半透明背景图的实现方式，该方法使用伪元素，在伪元素上设置背景图并调整透明度，成本更高，会创建层叠上下文，看起来也不够优雅。
新方法
昨天在张老师的博客看到一篇文章巧用 CSS cross-fade() 实现背景图像半透明效果，进去看了下，哎呦还不错，時雨之前还没用过这个新特性，这不直接拿来主义，在 ZERO 上先实践。
cross-fade() 可以在规定的透明性共混两个图像。它可用于许多简单的图像处理，例如使用纯色为图像着色或通过将图像与径向渐变组合来突出显示页面的特定区域。
cross-fade() 将图像以百分比限定不透明度与其它图像混合。百分比值不带引号，必须包含 '%' 符号，其值必须介于 0% 和 100% 之间。0% 意味着图像是完全透明的，而 100% 使图像完全不透明。语法如下：
<image-combination> = cross-fade(<image>, <image>, <percentage>)
其中 <percentage> 指的是透明度，只会改变第 2 个图像的透明度，最终的效果是第 1 个图像完全不透明和第 2 个图像半透明叠加的效果。如下示例：
cross-fade(url(white.png), url(black.png), 0%);   /* 全黑 */
cross-fade(url(white.png), url(black.png), 100%); /* 全白 */
所以要实现半透明背景图效果，只需要第 1 张图使用透明图片，第 2 张图使用背景图就可以了，具体实现如下：
.app {
  @apply min-h-screen overflow-x-hidden bg-fixed bg-center bg-cover bg-no-repeat;
  --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
  background-color: var(--background-color);
  background-image: cross-fade(
    var(--transparent),
    url("./assets/images/background.jpg"),
    10%
  );
  background-image: -webkit-cross-fade(
    var(--transparent),
    url("./assets/images/background.jpg"),
    10%
  );
}
cross-fade() 本质上就是个 <image> 图像数据类型，和 url() 图像，gradient 渐变图像，image-set() 函数是一个性质，可以用在border-image, mask-image 等属性中。 因此，使用 cross-fade() 函数替换 url() 函数实现背景图片的半透明效果决定是成本最低，效果最好的方法。
兼容性
cross-fade() 在 webkit 浏览器支持的非常早，具体兼容如下：
兼容性
Safari 新版本已经不需要私有前缀了，而谷歌要想支持该函数依旧需要添加前缀 -webkit-。
该函数对于生产环境还是需要谨慎使用，不过对于个人站点来说，拜托，每天能有几个人来溜达就不错了，所以新就是好，简洁就是优雅！快快用到你的博客上去吧。
Just enjoy it ฅ●ω●ฅ.
最近更新 1mo ago