我正在尝试在要构建的模拟网页上显示图像作为背景图像。当我尝试使用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显示。
答案 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>