背景渐变属性不起作用答案

【问题标题】：Background Gradient property is not working背景渐变属性不起作用
【发布时间】：2018-06-09 07:34:39
【问题描述】：

谁能解释为什么我的背景渐变属性不起作用。
如何在不改变位置属性的情况下实现背景渐变？
注意：当我使用 class="parent" 从 div 中删除 position 属性时，它可以工作。
任何改进代码的建议也值得赞赏。

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>

【问题讨论】：

min-height:100vh to body --> body 有 0 高度和渐变，没有大小，所以你也没有到 html 和 canvas 的背景传播
谢谢它的工作，但是当我从 .parent div 中删除位置属性时，你能帮我解释一下为什么后台工作吗？
如果你删除位置，内容是流入的，你的身体有一个高度，所以你会看到渐变，这个也会传播到 html 和画布，所以你会在全屏上看到渐变也
你能提供一些链接来阅读这个吗？我找不到一个
好吧，我会用所需的资源添加一个详细的答案；）

标签： html css

【解决方案1】：

在这里，您面临两个问题。首先，您必须考虑通过将.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也能看到这个？

因为 body 的背景有一种特殊的行为，它会传播到 html，然后传播到 canvas，所以实际上你看到的不是 body 的背景，而是 canvas 的背景。如您所见here：

根元素的背景变成了元素的背景 canvas 及其背景绘画区域延伸到覆盖整个画布。

和

对于根元素是 HTML HTML 元素或 XHTML 的文档 html 元素 [HTML]：如果背景图像的计算值在根元素为无且其背景颜色为透明，用户代理必须改为传播背景的计算值 来自该元素的第一个 HTML BODY 的属性 或 XHTML 正文子元素元素。该 BODY 元素的背景属性的使用值是它们的初始值，传播的值被视为它们是在根元素上指定的

现在，为什么这不适用于渐变？

仅仅是因为在您的情况下 body 的高度为 0，html 的高度也为 0，因为您删除了默认边距并且没有流入元素。此外，您需要考虑内在尺寸和比例。如您所见here：

位图图像（例如 JPG）始终具有固有尺寸和比例。

矢量图（如 SVG）不一定有内在维度。如果它同时具有水平和垂直内在尺寸，它也有内在的比例。如果它没有维度或者只有一个维度，它可能有也可能没有比例。

CSS <gradient>s 没有固有尺寸或固有比例。

因此，如果没有为渐变定义大小，它将具有自动大小，在您的情况下等于 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;
  }
}

这就是为什么如果你删除这个位置，你的身体会有一个高度，渐变将是可见的，因为他会自动调整大小以适应身体，并将传播到整个屏幕。

【讨论】：

哇！非常感谢，现在我明白为什么它不起作用了。很好的解释。谢谢你，先生。

【解决方案2】：

body 元素没有高度。这就是为什么您的渐变不起作用的原因。也可以使用 -moz- 和 webkit。

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: rgb(#f98866);
background: -moz-linear-gradient(to right, #f98866, #ffffff);
background: -webkit-linear-gradient(to right, #f98866, #ffffff);
background: -o-linear-gradient(to right, #f98866, #ffffff);
background: -ms-linear-gradient(to right, #f98866, #ffffff);
background: linear-gradient(to right, #f98866, #ffffff);
height:100vh;
}

.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>

【讨论】：

your guardian --> 我喜欢这个......我们不再需要带有监护人的前缀