使⽤CSScross-fade（）实现背景图像半透明效果的⽰例
代码
⼀、需求描述
某元素，希望background-image背景图⽚是半透明的，但是，元素⾥⾯的其他内容，例如⽂字，图标之类的还是不透明。
如果是纯⾊背景或者是CSS渐变背景，很好处理，使⽤rgba或者hsla颜⾊⾊值即可。
但是，如果是url()背景图像，似乎就⽆能为⼒了。
如果是个内联的<img>图像那很好处理，⽆论是filter滤镜、 mask遮罩还是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
但是这个⽅法太啰嗦，成本太⾼（创建了⼤量的层叠上下⽂、尺⼨是不是需要调整），⽆法⼤规模使⽤。
有没有什么好的实现⽅法呢？
cssclass属性试试使⽤cross-fade()图像函数。
⼆、cross-fade()实现背景图像半透明
cross-fade()函数可以让两张图像半透明混合。
例如：
<div class="cross-fade-image"></div>
.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()函数的传统语法，具体如下：
<dfn id="ltimage-combination">
<image-combination>
</dfn> = cross-fade( <image>, <image>, <percentage> )
其中<percentage>指的是透明度，只会改变第2个图像的透明度，最终的效果是第1个图像完全不透明和第2个图像半透明叠加的效果。
关于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()本质上就是个<image>图像数据类型，和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()实现背景图像半透明效果的⽰例代码的⽂章就介绍到这了，更多相关CSS cross-fade()背景图像半透明内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。