css引用图片的方法

　　介绍

这篇文章将为大家详细讲解有关css引用图片的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

图片写入css: css引用图片

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

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

例如:& lt; p id=皃ic"祝辞& lt;/p>

css引用图片第三步:在css目录下的指数。css里面为#图片插入背景图片

css引用图片第四步:在终端输入webpack打包报错,需要在终端配置ffile-loader和url-loader

npm安装-save-dev file-loader url-loader

安装成功

在终端输入:

css引用图片第五步:在webpack-config.js里面的====模块里配置==url-loader==(url-loader包括file-loader,所以不用再配置file-loader)

//模块,例如解读css,图片如何转换,压缩模块:{ 　　规则:[ 　　{ 　　测试:/\。css/美元,使用:[& # 39;style-loader& # 39; & # 39; css-loader& # 39;] 　　}, { 　　测试:/\。(png | jpg | gif)/使用:[{ 　　装载机:& # 39;url-loader& # 39; 　　选择:{ 　　限制:500000 　　} 　　}) 　　} 　　] 　　},

测试:/?png | jpg | gif)/是匹配图片文件后缀名称。

使用:是指定使用的装载机和装载机的配置参数。

限制:是把小于500000 b的文件打成Base64的格式,写入JS。

css引用图片第六步:再终端输入==webpack==进行打包

css引用图片第七步:npm运行服务器进行浏览器预览

注意:
<李>

[x] url-loader封装了file-loader.url-loader不依赖于file-loader,即使用url-loader时,只需要安装url-loader即可,不需要安装file-loader,因为url-loader内置了file-loader。

<李>

url-loader工作分为两种情况:

<李>

文件大小小于限制参数,url-loader将会把文件转为DataURL (Base64格式),

<李>

文件大小大于极限,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。(其实我们只安装一个url-loader就可以了。但是为了以后的操作方便,我们这里就顺便安装上file-loader)。

<李>

配置url-loader时不用在上方引入,只有要引入插件时才需要在webpack-config。js上面引入

关于css引用图片的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

css引用图片的方法