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

關于css引用圖片的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。