html - 为什么位置的相对值不显示图像?
问题描述
下面的代码始终显示图像,无论相对或绝对位置如何
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
#h1 {
position: relative;
width: 250px;
height: 76px;
left: 0;
top: 0;
background: url("https://dummyimage.com/250x76/000/fff&text=Heading+1") no-repeat;
}
</style>
</head>
<body>
<h1 id="h1">Heading 1
</h1>
</body>
</html>
但是添加 span 元素后的这段代码仅在位置设置为绝对位置时才显示图像。我不明白为什么在第二个代码中,当位置是相对时,图像不会显示。一旦位置设置为绝对位置,是什么使图像出现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
<style>
#h1 span {
position: relative;
width: 250px;
height: 76px;
left: 0;
top: 0;
background: url("https://dummyimage.com/250x76/000/fff&text=Heading+1") no-repeat;
}
</style>
</head>
<body>
<h1 id="h1">Heading 1
<span>
</span>
</h1>
</body>
</html>
解决方案
推荐阅读
- r - R中的命名空间循环引用
- python - 纸浆 CBC 热启动立即接受初始解决方案
- reactjs - 具有联合类型和泛型的打字稿数组要求字段是可选的才能编译
- python - PySide2:如何防止 QFileDialog 关闭 Sub-QMainWidget
- javascript - 如何创建全局安装到系统中的 CLI 应用程序,例如 ng?
- javascript - 我如何在 Node.js Web 服务器上根据请求生成 SPA 构建(例如,根据用户“发布”请求)并将构建文件上传到 S3?
- google-apps-script - Google Apps 脚本错误:“您无权访问请求的文档”
- android - 为什么调用 MediaStore.ACTION_IMAGE_CAPTURE 意图后图像的路径为空?
- java - 为什么我在 Spring Boot 应用程序中遇到此异常?
- laravel - Laravel Eloquent:获取任务完成百分比