首頁 >web前端 >css教學 >css怎麼引用圖片? css引用圖片的方法

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

不言
不言原創
2018-08-18 15:48:4815384瀏覽

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

圖片寫入css:css引用圖片

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

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

例如:9084ca87e7f82cffaf3fd15613d1231494b3e26ee717c64999d7867364b1b4a3

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn