看看CSS中的那些背景圖片函數！

本篇文章帶大家來了解CSS中的背景圖片函數：url()、image()、image-set()、cross-fade()、element()。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。

【推薦教學：CSS影片教學 】

url()

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

background-image: url('./背景图片函数.png');
background-image: url('https://s3.ax1x.com/2020/11/29/DcV9V看看CSS中的那些背景圖片函數！');

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實作了一種類似雙向綁定的功能效果

      <p>
        <span>hello world</span>
      </p>

      <p></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;
      }

效果圖

這個屬性還能做到更多有趣的效果，更多有趣的效果可去這裡查看，在兼容性上，遺憾的是目前只有firefox支援這個屬性

更多程式相關知識，請造訪：程式設計影片！ ！

以上是看看CSS中的那些背景圖片函數！的詳細內容。更多資訊請關注PHP中文網其他相關文章！