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

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

圖片寫入css：css引用圖片

css引用圖片第一步：在src目錄下新建一個images資料夾並且放入圖片

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

例如：

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上面引入

#相關推薦：

##有時css引用圖片打包後來找不到資源檔案是什麼原因

關於圖片引用URLREWRITE的問題。

以上是css怎麼引用圖片？ css引用圖片的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！