顺风背景图像未显示

【问题标题】：tailwind background img not showing顺风背景图像未显示
【发布时间】：2021-06-26 10:31:39
【问题描述】：

可能是一个简单的修复，但我想知道为什么我的英雄部分的背景图像没有显示？

根据文档，使用 bg-cover 应用 w-full 和 h-full 至少会显示图像。唯一的解决方案是添加一个 position: absolute 类。我想知道为什么会这样？文档没有说要添加一个绝对类，但这似乎解决了它，但我想知道为什么（这让我很困惑哈哈）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../dist/tailwind.css">
    <title>Document</title>
</head>

<body>



    <div class=" w-full h-full" style="background-image: url('https://images.unsplash.com/photo-1624542316074-5ce16f7b6d41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80');">
        <div></div>
    </div>

【问题讨论】：

标签： css tailwind-css

【解决方案1】：

你应该给div一些height一些像文本这样的内容，或者使用tailwind实用程序h-{something}不要使用h-full，因为它与css相同height: 100%;如果你想让它填满屏幕使用实用程序类h-screen 见下面的sn-p

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
<div class="w-full h-screen" style="background-image: url('https://images.unsplash.com/photo-1624542316074-5ce16f7b6d41?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80');">
  <div></div>
</div>

【讨论】：

谢谢！我觉得文档不太清楚，我想我个人需要先复习 CSS 基础 =D.. 完全忘记了整个视口高度的事情..