css - 背景图片未加载
问题描述
出于某种原因,它以前可以工作,但我没有更改这些文件中的任何内容,并且背景图像停止加载。我模拟了一个codepen来重现问题:
https://codepen.io/jamespagedev/pen/WYNPYv
HTML5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>UI Project Wk - Home</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
</head>
<body>
<div class="coming-soon">
<div class="notice">
<h1>COMING SOON</h1>
<hr>
<p id="countdown-clock" style="font-size:30px"></p>
</div>
</div>
</body>
</html>
CSS:
.coming-soon {
background-image: url('https://www.w3schools.com/w3images/forestbridge.jpg');
height: 100%;
background-position: center;
background-size: cover;
position: relative;
color: white;
font-family: "Courier New", Courier, monospace;
font-size: 25px;
}
.notice {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
hr {
margin: 50px auto;
width: 40%;
}
谁能告诉我为什么背景图像没有出现?
解决方案
要使用height: 100%;
父元素,必须具有定义的高度。在codepen中,添加这个作品:
html, body {
height: 100%;
}
推荐阅读
- java - 变量可能尚未初始化,并且构造函数无法应用于 java 分数项目中的给定类型错误
- linux - 将参数传递给系统调用
- javascript - React - 如何在输入更改时防止重新渲染所有输入字段
- regex - 使用 bash 脚本搜索和替换包含点、单引号和双引号的字符串
- python - 如何从 Django 表单中的图像字段中清除图像
- android - Android App Widget BroadcastReceiver 升级后停止工作
- amazon-ses - CDK 将策略添加到自定义创建的 SES 验证电子邮件
- java - 如何在 windows cmd 中运行 lanterna 项目?
- rust - 匹配 `&str` 的开头
- authentication - 如何实现基于组织的认证