一、要求叙述
某原素，期待 background-image 情况照片是半全透明的，可是，原素里边的别的內容，比如文本，标志这类的還是不全透明。
假如是单色情况或是是CSS渐变色情况，非常好解决，应用 rgba 或是 hsla 色调色值就可以。
可是，假如是 url() 情况图象，好像就束手无策了。
假如是个内联的 <img> 图象那非常好解决，不管是filterps滤镜、 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
可是这一方式太唠叨，成本费太高（建立了很多的堆叠左右文、规格不是是必须调节），没法规模性应用。
有木有甚么好的完成方式呢？
试一下应用 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 开展了混和3D渲染。
上边实例应用的是 cross-fade() 涵数的传统式英语的语法，实际以下：
<dfn id="ltimage-combination"> <image-combination> </dfn> = cross-fade( <image>, <image>, <percentage> )
在其中 <percentage> 指的是全透明度，总是更改第二个图象的全透明度，最后的实际效果是第一个图象彻底不全透明和第二个图象半全透明累加的实际效果。
有关 cross-fade() 图象涵数中的百分数值更改的只是是后边一个图象的全透明度，我好长时间之前做了一个demo网页页面开展过检测，您能够狠狠地地址击这儿： CSS3 cross-fade特性全透明度功效目标检测
提示截屏以下：
尽管 cross-fade() 涵数设计方案的初心是好几个图象半全透明累加，可是，那样的情景具体开发设计非常少碰到，因而， cross-fade() 反倒更合适操纵单独情况图象的半全透明实际效果。
完成基本原理非常简单，第一幅图应用全透明照片，第二幅图应用总体目标照片便可以了。
举个案子：
某情况图在黑喑方式下太亮了，期待调节下情况图的明暗度，应用 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()情况图象半全透明內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！