css如何引用圖片

小編給大家分享一下css如何引用圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

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

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

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

　　npminstall&ndash;save-devfile-loaderurl-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引用圖片第七步：npmrunserver進(jìn)行瀏覽器預(yù)覽

　　注意：

　　[x]url-loader封裝了file-loader。url-loader不依賴于file-loader，即使用url-loader時，只需要安裝url-loader即可，不需要安裝file-loader，因為url-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。（其實我們只安裝一個url-loader就可以了。但是為了以后的操作方便，我們這里就順便安裝上file-loader。）

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

以上是“css如何引用圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！