css引用圖片的方法

這篇文章將為大家詳細(xì)講解有關(guān)css引用圖片的方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

圖片寫入css：css引用圖片

css引用圖片第一步：在src目錄下新建一個(gè)images文件夾并且放入一張圖片

css引用圖片第二步：在index.html中插入一個(gè)區(qū)塊

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

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

css引用圖片第四步：在終端輸入webpack打包報(bào)錯(cuò)，需要在終端配置 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,圖片如何轉(zhuǎn)換，壓縮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的配置參數(shù)。

limit：是把小于500000B的文件打成Base64的格式，寫入JS。

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

css引用圖片第七步：npm run server進(jìn)行瀏覽器預(yù)覽

注意：

• [x] url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時(shí)，只需要安裝url-loader即可，不需要安裝file-loader，因?yàn)閡rl-loader內(nèi)置了file-loader。

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

• 文件大小小于limit參數(shù)，url-loader將會把文件轉(zhuǎn)為DataURL（Base64格式）；

• 文件大小大于limit，url-loader會調(diào)用file-loader進(jìn)行處理，參數(shù)也會直接傳給file-loader。（其實(shí)我們只安裝一個(gè)url-loader就可以了。但是為了以后的操作方便，我們這里就順便安裝上file-loader。）

• 配置url-loader時(shí)不用在上方引入，只有要引入插件時(shí)才需要在webpack-config.js上面引入

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