Question

我正在测试一些CSS悬停效果，我已经在我的容器div的背景上出现了一个线性渐变，它包含一个无序列表。我已经将另一个线性渐变应用于body，以使页面具有不同的背景。出于某种原因，body上的渐变不起作用，我不知道为什么。有什么想法吗？

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #480048, #c04848);
  font-family: 'Lato';
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1200px;
  height: 150px;
  background: linear-gradient(to right, #49a09d, #5f2c82);
  text-align: center;
  border-radius: 100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<div class="container">
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li>Six</li>
  </ul>
</div>

Codepen链接：https://codepen.io/simonrevill/pen/zaNYBB

任何帮助都将非常感激。谢谢。

Answer 1

这是由于position: absolute元素上的.container：由此，body的高度为零（因为绝对定位的元素不会被视为父级的大小/高度）元素），即它不可见。

只需更改position设置，例如更改为relative，您就会看到身体上的渐变

https://codepen.io/anon/pen/xzgxep

Answer 2

正文没有内联内容。将任何添加到正文中，例如：

<body>&nbsp;

然后它将渲染身体背景。

为什么线性渐变适用于我的div，但不适合我的身体？

2 个答案: