首页  >  文章  >  web前端  >  css怎么引用图片?css引用图片的方法

css怎么引用图片?css引用图片的方法

不言
不言原创
2018-08-18 15:48:4815350浏览

css如何引用图片?css引用图片的方法步骤又是怎样的?本篇文章就来给大家介绍关于css引用图片的方法,有需要的朋友可以参考一下,希望对你有所帮助。

图片写入css:css引用图片

css引用图片第一步:在src目录下新建一个images文件夹并且放入一张图片

css引用图片第二步:在index.html中插入一个区块

例如:a683d5033a35b82753cccc635ca0000494b3e26ee717c64999d7867364b1b4a3

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