当前位置: 首页 > Web前端 > CSS

CSScross-fade()实现背景图片半透明效果

时间:2023-03-30 18:58:03 CSS

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

.cross-fade-image{width:300px;高度:300px;背景:无重复中心/包含;背景图片:-webkit-cross-fade(url(1.jpg),url(2.jpg),50%);背景图像:淡入淡出(url(1.jpg),url(2.jpg),50%);会产生下图所示的效果。2.jpg此图像使用50%透明度和1.jpg混合渲染。上面的例子使用了cross-fade()函数的传统语法,如下:它会改变第二张图片的透明度,最终效果是第一张图片完全不透明,第二张图片半透明。