02 半透明背景图实现
先来看看之前的半透明背景图实现:
.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");
}
这个方法是時雨看到的几乎全部博客的半透明背景图的实现方式,该方法使用伪元素,在伪元素上设置背景图并调整透明度,成本更高,会创建层叠上下文,看起来也不够优雅。
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