css如何引用图片？css引用图片的方法步骤又是怎样的？本篇文章就来给大家介绍关于css引用图片的方法，有需要的朋友可以参考一下，希望对你有所帮助。
图片写入css：css引用图片
css引用图片第一步：在src目录下新建一个images文件夹并且放入一张图片
css引用图片第二步：在index.html中插入一个区块
例如：
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的配置参数。
HMCSS是由河马工作室全新开发的通用的企业网站系统，是PHP+MYSQL的架构，采用DIV+CSS的方式进行网页布局，网站的功能包括有：企业简介，图片展示幻灯，产品图片滚动，企业荣誉，实力展示，产品分类及展示，网上招聘，在线留言，联系我们，在线地图等内容，另外还带有完整的管理后台，如网站SEO优化关键词等都可以自由设定。 HMCSS目前发布的是1.0版本，就是上述的这些内容。后面我们还要加上产品
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上面引入
相关推荐：
