css如何引用图片

小编给大家分享一下css如何引用图片，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
　　css引用图片第一步：在src目录下新建一个images文件夹并且放入一张图片
　　css引用图片第二步：在index.html中插入一个区块
　　例如： 　　css引用图片第三步：在css目录下的index.css里面为#pic插入背景图片
　　css引用图片第四步：在终端输入webpack打包报错，需要在终端配置ffile-loader和url-loader
　　npminstall–save-devfile-loaderurl-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引用图片第七步：npmrunserver免费云主机、域名进行浏览器预览
　　注意：
　　[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如何引用图片”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云技术行业资讯频道！

相关推荐: HTML行内块元素有什么特点

这篇文章主要讲解了“HTML行内块元素有什么特点”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML行内块元素有什么特点”吧！ 典型代表input img 特点： 1.和相邻行内元素在同一行，但是之间会有空白…