CSS函數那些事（三）背景圖片函數

時間 2020-12-06

標籤 css html git github web chrome segmentfault 瀏覽器 app 函數欄目 CSS 简体版

原文原文鏈接

url()

url函數表示對某個資源的引用，可傳入連接以及相對地址，如css

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

image()

image功能相似於url，可是與url不一樣的是，image提供了一種優雅降級的能力。好比html

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

這段代碼意思就是，假如瀏覽器支持webP格式圖片就應用a.webP,若是不支持，就再測試a.png，直到適配到當前瀏覽器。遺憾的是，這個函數目前還處於草案階段。git

因此這個函數其餘的功能暫時先不關注，有興趣的同窗，可自行去 MDN 瞭解更多相關的信息,也可瞭解最新進展github

image-set()

image-set能夠保證圖片在不一樣分辨率設備上的適配，能根據不一樣的設備類型展現不一樣的圖片，看下面的例子web

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

這段例子意思就是在1倍屏上顯示bg1x.png，在2倍屏上顯示 bg2x.png 。兼容性上，目前最新主流的瀏覽器都已支持，對於不支持的設備能夠在使用這個函數前使用background：url()來進行兼容。chrome

cross-fade()

cross-fade用於在兩張疊加的背景圖片上施加透明度。用法以下segmentfault

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

前面兩個參數爲圖片的資源位置，後面一個須要傳入百分比，表示透明度，這個透明度是相對於最後那張圖片的，好比，當百分比爲0%時,此時應該只顯示第一張圖片瀏覽器

當百分比爲100%時，只顯示第二張圖片。app

這個屬性,在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;
      }

效果圖