如何使用CSScross-fade()实现背景图像半透明效果
这篇文章主要介绍如何使用CSS cross-fade()实现背景图像半透明效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联建站是一家以网络技术公司，为中小企业提供网站维护、成都网站建设、成都做网站、网站备案、服务器租用、域名注册、软件开发、成都小程序开发等企业互联网相关业务，是一家有着丰富的互联网运营推广经验的科技公司，有着多年的网站建站经验，致力于帮助中小企业在互联网让打出自已的品牌和口碑，让企业在互联网上打开一个面向全国乃至全球的业务窗口：建站服务热线：18982081108
一、需求描述
某元素，希望 background-image 背景图片是半透明的，但是，元素里面的其他内容，例如文字，图标之类的还是不透明。
如果是纯色背景或者是CSS渐变背景，很好处理，使用 rgba 或者 hsla 颜色色值即可。
但是，如果是 url() 背景图像，似乎就无能为力了。
如果是个内联的 ![]()
opacity 透明度设置都可以实现我们的效果，但是偏偏这里是背景图像，所有前面提到的这些方法都会影响文字的正常显示。
我估计很多人会想到使用 ::before / ::after 伪元素实现，例如：
.box {
position: relative;
z-index: 0;
}
.box::before {
content: '';
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
background: url(xxx.jpg) no-repeat center / contain;
z-index: -1;
opacity: .5;
}实时效果如下（如果没有效果请访问原文 作者张鑫旭 ）：
by-zhangxinxu
但是这个方法太啰嗦，成本太高（创建了大量的层叠上下文、尺寸是不是需要调整），无法大规模使用。
有没有什么好的实现方法呢？
试试使用 cross-fade() 图像函数。
二、cross-fade()实现背景图像半透明
cross-fade() 函数可以让两张图像半透明混合。
例如：
.cross-fade-image {
width: 300px; height: 300px;
background: no-repeat center / contain;
background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
background-image: cross-fade(url(1.jpg), url(2.jpg), 50%);
}就会有下图所示的效果。
2.jpg 这张图以50%的透明度和 1.jpg 进行了混合渲染。
上面案例使用的是 cross-fade() 函数的传统语法，具体如下：
= cross-fade( , , )
其中
关于 cross-fade() 图像函数中的百分比值改变的仅仅是后面一个图像的透明度，我很久以前做过一个demo页面进行过测试，您可以狠狠地点击这里： CSS3 cross-fade属性透明度作用对象测试
示意截图如下：
虽然 cross-fade() 函数设计的初衷是多个图像半透明叠加，但是，这样的场景实际开发很少遇到，因此， cross-fade() 反而更适合控制单个背景图像的半透明效果。
实现原理很简单，第1张图使用透明图片，第2张图使用目标图片就可以了。
举个例子：
某背景图在黑暗模式下太亮了，希望调整下背景图的明暗度，使用 cross-fade() 函数实现就是下面这段CSS代码（宽高设置的CSS略）：
.dark {
/* 兜底，IE和Firefox浏览器 */
background-image: url(2.jpg);
--transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
/* Safari最近版本已经不需要私有前缀了 */
background-image: cross-fade(var(--transparent), url(2.jpg), 40%);
/* 如使用自定义属性，-webkit-语句需要放在没有私有前缀语句的下面 */
background-image: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);
background-size: cover;
}效果如下：
是不是很简单，是不是比伪元素实现要靠谱的多，对应的demo访问 这里 。
cross-fade() 本质上就是个 url() 图像，gradient渐变图像，image-set()函数是一个性质，可以用在 border-image , mask-image 等属性中。
因此，使用 cross-fade() 函数替换 url() 函数实现背景图片的半透明效果决定是成本最低，效果最好的方法。
三、移动端兼容性极佳
cross-fade() 函数webkit浏览器支持的非常早，iOS 5，Android 4.4均支持，只不过需要设置私有前缀，具体如下图所示：
因此，在移动端可以放心使用，至于PC端，不需要考虑IE浏览器的项目也是可以放心使用的，就算需要考虑IE也没毛病，不过就是背景图还是完全不透明而已，视觉体验稍微低了一点而已。
这世界上没有所谓的没有用的CSS属性，只是没有遇到合适的场景而已；就像依然单身的诸位，只是还没有遇到合适的那个他/她而已。
另外， cross-fade() 函数加入CSS规范后有了新的语法，更灵活更强大，但是目前没有任何浏览器支持，因此本文没有做相关介绍。
以上是“如何使用CSS cross-fade()实现背景图像半透明效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
本文名称：如何使用CSScross-fade()实现背景图像半透明效果
URL标题：
http://njwzjz.com/article/pgdohd.html
