如何在css中引用图片

如何在css中引用图片

css中引入图片一般有3种形式，1.从本地引用图片；2.从网络引用图片；3.使用base64对图片编码进行引用。

一、从本地引用图片

引用本地图片时，会用相对的地址，而不是绝对的地址。

（相关课程推荐：css视频教程）

例如你有一个叫page的文件夹，里面还包含两个文件夹，一个叫css，另一个叫images。css文件夹里放了一个叫style.css的样式表，images里面放了一个网页的背景图片叫bg.png-600。你想在body标签中应用一个images目录下的背景图片。你可以这样：

body{
    background:url('../images/bg.png-600');
}

注意，这里的../ 表示的就是上一级目录，因为css样式表在css目录下，它的上一级目录就回到了page文件夹，page文件夹下有个images文件夹。

2、从网络引用图片

从网络引入图片只需要填写图片url地址即可。

body{
    background:url('https://www.0133.cn/static/images/logo.png-600');
}

3、使用base64引用图片

body{
    backgroud: url(data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXR
FWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJRE
FUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIB
hH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/　
LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86G
AiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D);
}

优点：减少http请求

缺点：增加文档体积，只能对小图片使用base64

提示：图片转base64可以通过在线网站进行。

本文来自css答疑栏目，欢迎学习！

以上就是如何在css中引用图片的详细内容，更多请关注0133技术站其它相关文章！