尽管链接和路径正确,为什么CSS background-image url不显示我的图像?

时间:2019-03-27 14:00:30

标签: css url background-image

我正在尝试在要构建的模拟网页上显示图像作为背景图像。当我尝试使用CSS背景图片和网址时,它将不会加载。我试图将图像作为背景图像放在标头类下的标头部分中,但不会加载。当我将鼠标悬停在括号中的路径上时,它会显示图像的缩略图,因此我知道它可以访问它。

我已经尝试了所有方法-移动文件,重命名文件,检查我的路径是否正确,使用和删除引号,反斜杠,正斜杠,在头部分中检查CSS路径是否正确,检查文件扩展名。当我在控制台“源”部分中单击文件名并选择“在新窗口中打开”时,它会在新窗口中显示图像,但是Chrome或任何其他浏览器由于某种原因似乎无法加载文件? !

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
}

header {
    background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
        
        <title>Phil My Glass</title>
    </head>
    <body>
        <header>
        <div class="top-section">
            </div>
        </header>
    </body>
</html>

如果我使用img标签将其放入HTML,则文件加载并显示得很好,但不会从CSS显示。

1 个答案:

答案 0 :(得分:1)

您只需要指定标题的高度-因为它的默认高度是0像素:-)

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 20px;
}

header {
    background-image: url(https://picsum.photos/200/300);
    height: 100px;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
        
        <title>Phil My Glass</title>
    </head>
    <body>
        <header>
        <div class="top-section">
            </div>
        </header>
    </body>
</html>