关于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，直到适配到以后浏览器。遗憾的是，这个函数目前还处于草案阶段。

所以这个函数其余的性能临时先不关注，有趣味的同学，可自行去 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()

我的项目中会蕴含文章中的测试代码，都做好了相应的分类，欢送各位继续关注，有帮忙话能够点个赞哦！我的项目地址戳这里