css怎麼引用圖片？css引用圖片的方法

css如何引用圖片？css引用圖片的方法步驟又是怎樣的？本篇文章就來給大家介紹關於css引用圖片的方法，有需要的朋友可以參考一下，希望對你有所協助。

圖片寫入css：css引用圖片

css引用圖片第一步：在src目錄下建立一個images檔案夾並且放入一張圖片

css引用圖片第二步：在index.html中插入一個區塊

例如：<p id="pic"></p>

css引用圖片第三步：在css目錄下的index.css裡面為#pic插入背景圖片

css引用圖片第四步：在終端輸入webpack打包報錯，需要在終端配置 ffile-loader和url-loader

npm install –save-dev file-loader url-loader

安裝成功

在終端輸入：

css引用圖片第五步：在webpack-config.js裡面的==module==裡配置==url-loader==(url-loader包括file-loader,所以不用再配置file-loader)

//模組：例如解讀CSS,圖片如何轉換，壓縮module:{     rules: [         {           test: /\.css$/,           use: [ 'style-loader', 'css-loader' ]         },{            test:/\.(png|jpg|gif)/ ,            use:[{                loader:'url-loader',                options:{                    limit:500000                }            }]         }       ] },

test:/.(png|jpg|gif)/是匹配圖片檔案尾碼名稱。

use：是指定使用的loader和loader的配置參數。

limit：是把小於500000B的檔案打成Base64的格式，寫入JS。

css引用圖片第六步：再終端輸入==webpack==進行打包

css引用圖片第七步：npm run server進行瀏覽器預覽

注意：

• [x] url-loader封裝了file-loader。url-loader不依賴於file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-loader內建了file-loader。

• url-loader工作分為兩種情況：
  

• 檔案大小小於limit參數，url-loader將會把檔案轉為DataURL（Base64格式）；

• 檔案大小大於limit，url-loader會調用file-loader進行處理，參數也會直接傳給file-loader。（其實我們只安裝一個url-loader就可以了。但是為了以後的操作方便，我們這裡就順便安裝上file-loader。）

• 配置url-loader時不用在上方引入，只有要引入外掛程式時才需要在webpack-config.js上面引入