有人可以解释为什么我的背景渐变属性不起作用。
如何在不改变position属性的情况下实现背景渐变？
注意:当我使用 class="parent"从 div 中删除位置属性时，它会起作用。
任何改进代码的建议也将受到赞赏。
var drop = document.querySelector(".drop");
var button = document.querySelector(".button");
button.addEventListener("click", function(){
drop.classList.toggle("animation");
});body, html{
margin: 0;
padding: 0;
}
body{
background: linear-gradient(to right, #f98866, #ffffff);
}
.parent{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
perspective: 1000px;
}
ul{
padding: 0;
margin: 0;
margin-top: 10px;
}
li{
list-style: none;
padding: 15px 70px;
background: #80bd9e;
color: #fff;
font-family: monospace;
text-align: center;
transition: 0.3s;
}
li:hover{
background: #89da59;
transform: skewX(-10deg);
}
a{
text-decoration: none;
color: #000;
}
.button{
padding: 20px 70px;
background: #ff420e;
color: #fff;
font-family: monospace;
font-size: 1.5em;
transition: 0.4s;
}
.button:hover{
cursor: pointer;
}
.animation{
transform: rotateX(-88deg);
opacity: 0;
}
.button:hover{
transform: rotateY(10deg);
}
.drop{
transition: 1s;
}<!DOCTYPE html>
<html>
<head>
<title>3D dropdown</title>
</head>
<body>
<div class="parent">
<div class="button">Click Me!</div>
<div class="drop animation">
<ul>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
<a href="#"><li>Option</li></a>
</ul>
</div>
</div>
</body>
</html>最佳答案
这里您面临两个问题。首先，您必须考虑通过设置 .parent元素绝对位置，您可以将其从流中删除，并且由于它是主体的唯一子元素，因此该元素的高度将等于 0。
考虑到这一点，背景在某些情况下可能仍然有效。如果您使用background-color或background-image即使你的高度等于 0，你也能看到它们:
body {
background: red;
margin:0;
}body {
background: url(http://lorempixel.com/g/400/200/);
margin:0;
}为什么即使 body 高度为 0 也能看到这个？
因为主体的背景有一种特殊的行为，它会传播到 html，然后传播到 Canvas ，所以实际上您看到的不是主体的背景，而是 Canvas 的背景。正如您可以阅读的那样 here :
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas.
还有
For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element
现在，为什么这不适用于渐变？
很简单，因为在您的情况下，body 的高度为 0，并且 html 的高度为 0，因为您删除了默认边距并且没有流入元素。此外，您还需要考虑内在尺寸和比例。正如您可以阅读的那样 here :
A bitmap image (such as JPG) always has intrinsic dimensions and proportions.
A vector image (such as SVG) does not necessarily have intrinsic dimensions. If it has both horizontal and vertical intrinsic dimensions, it also has intrinsic proportions. If it has no dimensions or only one dimension, it may or may not have proportions.
CSS
<gradient>shave no intrinsic dimensions or intrinsic proportions.
因此，如果没有为渐变定义大小，它将有一个自动大小，在您的情况下等于 0，因此我们看不到它。
下面是一个用图像来说明这一点的示例:
body {
margin:0;
background-image:url(https://lorempixel.com/g/400/200/);
background-size:100px 20px;
animation:anime 2s infinite linear;
}
@keyframes anime {
from {
background-size:100px 20px;
}
to {
background-size:100px 0px;
}
}背景仍然可见，因为它会重复，直到我们的大小等于 0。相同的逻辑将适用于渐变，但当您使用向右作为方向时很难看到它，因为重复将产生连续背景的错觉。
body {
margin: 0;
background-image: linear-gradient(to right, blue, red);
background-size: 100% 20px;
animation: anime 2s infinite linear;
}
@keyframes anime {
from {
background-size: 100% 20px;
}
to {
background-size: 100% 0px;
}
}往下看更清晰!
body {
margin: 0;
background-image: linear-gradient(to bottom, blue, red);
background-size: 100% 20px;
animation: anime 2s infinite linear;
}
@keyframes anime {
from {
background-size: 100% 20px;
}
to {
background-size: 100% 0px;
}
}这就是为什么如果您删除该位置，您的 body 将有一个高度，渐变将可见，因为他将自动调整大小以适合 body ，并且它将传播以覆盖整个屏幕。
关于html - 背景渐变属性不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49473860/