CSS怎么創建一個透明圖片背景

這篇文章主要介紹“CSS怎么創建一個透明圖片背景”，在日常操作中，相信很多人在CSS怎么創建一個透明圖片背景問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS怎么創建一個透明圖片背景”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　一、把Canvas圖片作為CSS背景圖片

　　CSSPaintAPI可以簡單理解為（實際不能等同）把Canvas畫布作為普通元素的背景圖片。

　　也就是CSS的background-image就是一個Canvas，我們可以利用Canvas絕大多數API繪制各種復雜有趣的圖形效果，以一種更高效的方式豐富web頁面元素的視覺展現。例如，藍色按鈕不僅僅是個藍色背景，上面還有白云漂漂的效果，想想就很棒！

　　二、一個簡單的案例了解CSSPaintAPI

　　例如，我們希望創建一個透明圖片背景。

　　則完整的CSS代碼和JS部分代碼如下：

　　.box{

　　width:180px;height:180px;

　　/*transparent-grid自己命名*/

　　background-image:paint（transparent-grid）；

　　}

　　然后繪制圖形的JS務必作為模塊引入，例如，建一個名為paint-grid.js的文件，在頁面上引入：

　　if（window.CSS）{

　　CSS.paintWorklet.addModule（'paint-grid.js'）；

　　}

　　paint-grid.js文件代碼如下：

　　//transparent-grid命名和CSS中的對應

　　registerPaint（'transparent-grid',class{

　　paint（context,size）{

　　//這里就是繪制的代碼了…

　　}

　　}）；

　　以上就是CSSPaintAPI使用的固定套路：

　　CSS中paint（abc）；

　　JS添加模塊CSS.paintWorklet.addModule（‘xxx.js’）；

　　xxx.js中代碼套路固定，在下面注釋位置寫繪制代碼即可；

　　registerPaint（'abc',class{

　　paint（context,size,properties）{

　　//繪制代碼在這里…

　　}

　　}）；

　　其中paint（context,size）中的兩個參數可以稍微介紹下：

　　context

　　為繪制上下文，全稱是PaintRenderingContext2D，和Canvas的CanvasRenderingContext2D是近親，API全部來自Canvas，一模一樣，不過由于安全限制，有些Canvas中的有些API是不能使用的，可用和不可用的API見下表：

　　微信截圖_20181127164151.png

　　size

　　size是一個包含了繪制尺寸的對象，數據結構如下：

　　{

　　width:180,

　　height:180

　　}

　　size的大小受到background-size屬性大小的影響，因此，對于重復背景，可以借助background-repeat進行平鋪循環，不用非得在繪制的JS代碼中循環。例如，下面即將要展示的demo效果，也可以這么實現，CSS部分：

　　.box{

　　width:180px;height:180px;

　　background-image:paint（transparent-grid）；

　　background-size:16px16px;

　　}

　　然后，paint-grid.js中只需要填充白-灰-灰-白，4個格子就好了，無需循環。

　　properties

　　可以用來獲得get到的CSS屬性和屬性值，包括CSS變量值；以及其他一些參數。

　　眼見為實，您可以狠狠地點擊這里：CSSPaintAPI繪制透明格子作為背景demo（目前僅Chrome有效果）

　　透明格子效果demo

　　paint-grid.js中的完整繪制代碼如下：

　　registerPaint（'transparent-grid',class{

　　paint（context,size）{

　　//兩個格子顏色

　　varcolor1='#fff',color2='#eee';

　　//格子尺寸

　　varunits=8;

　　//橫軸數軸循環遍歷下

　　for（varx=0;x<size.width;x+=units）{

　　for（vary=0;y<size.height;y+=units）{

　　context.fillStyle=（x+y）%（units*2）===0?color1:color2;

　　context.fillRect（x,y,units,units）；

　　}

　　}

　　}

　　}）；

　　補充：

　　類似格子這類重復背景，可以借助background-repeat進行平鋪循環，不用非得在繪制的JS代碼中循環，不過需要借助background-size屬性幫助，改變繪制的尺寸。例如，上面demo效果，也可以這么實現，CSS部分：

　　.box{

　　width:180px;height:180px;

　　background-image:paint（transparent-grid）；

　　background-size:16px16px;

　　}

　　然后，paint-grid.js中只需要填充白-灰-灰-白，4個格子就好了，無需循環。

　　registerPaint（'transparent-grid',class{

　　paint（context,size）{

　　//兩個格子顏色

　　varcolor1='#fff',color2='#eee';

　　//兩個白色格子

　　context.fillStyle=color1;

　　context.fillRect（0,0,8,8）；

　　context.fillRect（8,8,8,8）；

　　//兩個灰色格子

　　context.fillStyle=color1;

　　context.fillRect（0,4,8,8）；

　　context.fillRect（4,0,8,8）；

　　}

　　}）；

到此，關于“CSS怎么創建一個透明圖片背景”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！