html文件夹打开不显示背景图片

WhereIsCodeFrom

已于 2022-12-12 01:13:12 修改

阅读量1.2k

点赞数

文章标签： html css 前端

于 2022-12-12 01:09:04 首次发布

本文链接：https://blog.csdn.net/qq_63488080/article/details/128280958

版权

今天交html作业时, 新建了一个文件夹用来交, css, pic 文件夹我都设置好了, 路径没问题, 用live server运行是可以显示图片的, 但是在文件看不了, 我觉得很奇怪, 自己之前的作业都可以看, 但是我又发现我有些作业可以看见, 有些就不行…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <style>
        div {
            width: 800px;
            height: 530px;
            background-image: url('pic/back.jpg');
            background-size: 100%;
        }
    </style> -->
    <link rel="stylesheet" href="css/displayback.css">
</head>
<body>
    <div></div>
</body>
</html>

div {
    width: 800px;
    height: 530px;
    /* background-image: url('/pic/back.jpg');
    background-size: 100%; */
}

问题的原因就是:

首先需要注意我们使用background-image时(也可以使用background)
此处关于自动补全(vsc) 你输入url 他补全为url() 如果你的工作区目录级别为这样子
在这里插入图片描述
那么你在写图片路径时需要先输入 / 然后就有自动补全的提示, 不要忘了路径加单引号 ‘’

重点

关于内嵌css和外联css显示图片的区别例子为我贴上去的代码, 有可能我搞错了

使用内嵌css 显示我的总结:

方法一:不要前导 / (前提是和我的vsc工作区目录级别一致)

background-image: url('pic/back.jpg');

该方法使用live server 运行可以查看到图片, 去文件路径下找文件夹打开html后缀文件 也可以 看到图片

方法二: 与方法一相反

background-image: url('/pic/back.jpg');

该方法使用live server 运行可以查看到图片, 去文件路径下找文件夹打开html后缀文件 不可以 看到图片

使用外联css 显示我的总结:

方法一: 同上(内嵌css)方法一, 此处不贴代码
该方法两种情况下都不可见图片

方法二:
该方法在live server 可见, 文件夹不可见

WhereIsCodeFrom

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
html文件夹打开不显示背景图片

关于内嵌css和外联css显示图片的区别
复制链接

扫一扫

html文件夹打开不显示背景图片

问题的原因就是:

重点

使用 内嵌css 显示 我的总结:

使用 外联css 显示 我的总结:

使用内嵌css 显示我的总结:

使用外联css 显示我的总结: