html - 为什么我的css背景图片没有显示?
问题描述
不太清楚为什么,但它显示为一个空白屏幕。
它的外观:
这是我的文件结构:
CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: #ffffff;
color: #555;
font-family: 'lato', 'Arial';
font-weight: 300;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image: url(/resources/css/images/hero.jpg);
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="resources/vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="resources/vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;1,300&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OmniFoods</title>
<header>
<div class="hero-text-box">
<h1>Goodbye junk food. Hello super Healthy meals</h1>
<a href="#">I’m hungry</a>
<a href="#">Show me more</a>
</div>
</header>
</head>
<body>
</body>
</html>
解决方案
我猜你在错误的目录中寻找这个,因为你的样式已经在“resources/css/”中。尝试通过执行以下操作继续此目录:
header{
background-image: url("./images/hero.jpg");
}
推荐阅读
- pddl - PDDL 规划器无法识别类型
- javascript - JS 计数器在滚动时开始
- string - 无需正则表达式的 Ansible 搜索和替换仅字符串文字以避免转义
- python - Intellisense 无法将 sklearn 返回的变量识别为数组类型
- reactjs - 在 React 中映射对象数组时出现错误
- r - 值逻辑表达式失败作为闪亮应用程序中的 if 参数
- python - 在 Windows 10 中使用 pip 安装新的 Python 3.9 没有意义(无法创建进程)
- php - 在magento 2中将产品添加到购物车后如何发送电子邮件?
- laravel - 使用 laravel 和 livewire 向表格添加过滤器
- python - python后端应用程序中的验证约定