共计 1456 个字符，预计需要花费 4 分钟才能阅读完成。
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，直到适配到以后浏览器。遗憾的是，这个函数目前还处于草案阶段。
所以这个函数其余的性能临时先不关注，有趣味的同学，可自行去 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()来进行兼容。
cross-fade()
cross-fade 用于在两张叠加的背景图片上施加透明度。用法如下
background-image: -webkit-cross-fade(url('./bg1x.png'),url('./bg2x.png'),70%);
后面两个参数为图片的资源地位，前面一个须要传入百分比，示意透明度，这个透明度是绝对于最初那张图片的，比方，当百分比为 0% 时, 此时应该只显示第一张图片
当百分比为 100% 时，只显示第二张图片。
这个属性, 在 firefox 中齐全不兼容，在 chrome 和 safari 中兼容性要好太多
element()
element 函数能够将网站上的某局部元素当做图片应用，实用于图片的属性同时也实用于利用 element 的对象，应用办法
element(id)
必须传入的是 id，看上面的例子，用 element 实现了一种相似双向绑定的性能成果
<div class="element-wrapper">
<span id="ele" contenteditable>hello world</span>
</div>
<div id="element-test"></div>
//style
.element-wrapper{
width: 200px;
height: 200px;
}
#element-test {
width: 200px;
height: 200px;
background: -moz-element(#ele);
background-size: contain;
background-repeat: no-repeat;
}
效果图
这个属性还能做到更多乏味的成果，更多乏味的成果可去这里查看，在兼容性上，遗憾的是目前只有 firefox 反对这个属性
最初
我最近在总结 css 函数相干的货色，系列的纲要
这篇是系列文章的第三篇，目前已产出
- CSS 函数那些事（一）比拟函数
- CSS 函数那些事（二）你不晓得的 attr()
我的项目中会蕴含文章中的测试代码，都做好了相应的分类，欢送各位继续关注，有帮忙话能够点个赞哦！我的项目地址戳这里
