CSS中如何使用cross-fade()实现背景图像半透明效果

这篇文章给大家分享的是有关CSS中如何使用cross-fade()实现背景图像半透明效果的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站主要从事成都网站设计、做网站、网页设计、企业做网站、公司建网站等业务。立足成都服务马龙,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

cross-fade()函数可以让两张图像半透明混合。 例如

HTML

css

.box {

width: 600px;

height: 450px;

background-image: -webkit-cross-fade(url(girl.jpg), url(1.jpg), 50%);

background-image: cross-fade(url(girl.jpg), url(1.jpg), 50%);

}

小伙伴们注意了，目前谷歌要想支持该函数需要添加前缀-webkit-才可以实现。

来看一下具体的实现方法：

cross-fade()函数获取图像列表，并以百分比的形式定义当每个图像与其他图像混合时保留的不透明度。百分比值必须编码为不带引号，并且必须包含“％”符号，并且其值必须在0％和100％之间 。将百分比视为每个图像的不透明度值，这意味着值为0％表示图像完全透明，而值为100％则使图像完全不透明。

下面的格式是将1.png这张图以75%的透明度与2.png这张图25%的透明度进行混合渲染

cross-fade( url(1.png) 75%, url(2.png) 25%);

上面的形式也可以写成

cross-fade( url(1.png) 75%, url(2.png));

如果未声明任何百分比，则两张图像都将是50％不透明的，并且淡入淡出渲染是两张图像的均匀合并。 以下是相同的效果。

cross-fade( url(1.png) 50%, url(2.png) 50%);

cross-fade( url(1.png) , url(2.png));

如果未声明任何百分比并且包含三个图像，则每个图像的不透明度为33.33％。以下是相同的效果。

cross-fade( url(1.png), url(2.png), url(3.png));

cross-fade( url(1.png) 33.33%, url(2.png) 33.33%, url(3.png) 33.33%);

感谢各位的阅读！关于“CSS中如何使用cross-fade()实现背景图像半透明效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！