css如何引用图片
小编给大家分享一下css如何引用图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
我们提供的服务有:成都网站制作、成都做网站、微信公众号开发、网站优化、网站认证、青铜峡ssl等。为上1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的青铜峡网站制作公司
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如何引用图片”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
本文题目:css如何引用图片
浏览地址:http://myzitong.com/article/jisijg.html