CSS中背景图片的函数有哪些-创新互联

这篇文章将为大家详细讲解有关CSS中背景图片的函数有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

为烈山等地区用户提供了全套网页设计制作服务,及烈山网站建设行业解决方案。主营业务为成都网站制作、成都做网站、烈山网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!

url()

url函数表示对某个资源的引用,可传入链接以及相对地址,如

background-image: url('./背景图片函数.png');
background-image: url('https://s3.ax1x.com/2020/11/29/DcV9V1.png');

image()

image功能类似于url,但是与url不同的是,image提供了一种优雅降级的能力。比如

background-image: image('a.webP','a.png','a.jpg');

这段代码意思就是,假如浏览器支持webP格式图片就应用a.webP,如果不支持,就再测试a.png,直到适配到当前浏览器。遗憾的是,这个函数目前还处于草案阶段。

CSS中背景图片的函数有哪些

所以这个函数其他的功能暂时先不关注,有兴趣的同学,可自行去 MDN 了解更多相关的信息,也可了解 新进展

image-set()

image-set可以保证图片在不同分辨率设备上的适配,能根据不同的设备类型展示不同的图片,看下面的例子

background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);

这段例子意思就是在1倍屏上显示bg1x.png,在2倍屏上显示 bg2x.png 。兼容性上,目前新主流的浏览器都已支持,对于不支持的设备可以在使用这个函数前使用background:url()来进行兼容。

CSS中背景图片的函数有哪些

cross-fade()

cross-fade用于在两张叠加的背景图片上施加透明度。用法如下

background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%);

CSS中背景图片的函数有哪些

前面两个参数为图片的资源位置,后面一个需要传入百分比,表示透明度,这个透明度是相对于最后那张图片的,比如,当百分比为0%时,此时应该只显示第一张图片

CSS中背景图片的函数有哪些

当百分比为100%时,只显示第二张图片。

CSS中背景图片的函数有哪些

这个属性,在firefox中完全不兼容,在chrome和safari中兼容性要好太多

CSS中背景图片的函数有哪些

element()

element函数可以将网站上的某部分元素当做图片使用,适用于图片的属性同时也适用于应用element的对象,使用方法

element(id)

必须传入的是id,看下面的例子,用element实现了一种类似双向绑定的功能效果

      
        hello world
      

      

//style       .element-wrapper{         width: 200px;         height: 200px;       }       #element-test {         width: 200px;         height: 200px;         background: -moz-element(#ele);         background-size: contain;         background-repeat: no-repeat;       }

效果图

CSS中背景图片的函数有哪些

这个属性还能做到更多有趣的效果,更多有趣的效果可去这里查看,在兼容性上,遗憾的是目前只有firefox支持这个属性

CSS中背景图片的函数有哪些

关于“CSS中背景图片的函数有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


分享标题:CSS中背景图片的函数有哪些-创新互联
转载注明:http://bzwzjz.com/article/cojdsc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站设计 网站设计 成都网站建设 成都网站建设 手机网站建设 成都网站建设流程 高端品牌网站建设 成都网站建设 专业网站建设 营销型网站建设 成都响应式网站建设 网站建设公司 梓潼网站设计 成都定制网站建设 成都网站设计 移动手机网站制作 成都网站制作 上市集团网站建设 成都模版网站建设 成都网站建设公司 成都网站建设公司 温江网站设计