文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-06-06 10:58

关注

这篇文章将为大家详细讲解有关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实现了一种类似双向绑定的功能效果

      <p class="element-wrapper">        <span id="ele" contenteditable>hello world</span>      </p>      <p id="element-test"></p>//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中背景图片的函数有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯