Question

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

＆＃13;

var drop = document.querySelector(".drop");

var button = document.querySelector(".button");

button.addEventListener("click", function(){
	drop.classList.toggle("animation");
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 1

这里你面临着两个问题。首先，您必须考虑通过使.parent元素绝对位置，将其从流中移除，因为它是身体的唯一子项，所以它的高度等于0.

考虑到这一点，在某些情况下背景可能仍然有效。如果您使用background-color或background-image，即使您的身高等于0，您也可以看到它们：

body {
  background: red;
  margin:0;
}

body {
  background: url(http://lorempixel.com/g/400/200/);
  margin:0;
}

为什么即使身体高度为0，你也可以看到这个？

因为身体背景的特殊行为会传播到html然后传播到画布，所以实际上它不是你看到的身体背景而是画布的背景。正如您可以阅读here：

根元素的背景成为的背景画布及其背景绘画区域扩展到覆盖整个区域画布。

和

对于其根元素是HTML HTML元素或XHTML的文档 html元素[HTML]：如果计算出背景图像的值就行了 root元素为none，其background-color是透明的user 代理必须传播背景的计算值 来自该元素的第一个HTML BODY 或XHTML正文子元素的属性元件。 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; } }

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

Answer 2

身体元素没有高度。这就是你的渐变不起作用的原因。也可以使用-moz-和webkit。

＆＃13;

var drop = document.querySelector(".drop");

var button = document.querySelector(".button");

button.addEventListener("click", function(){
	drop.classList.toggle("animation");
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

背景渐变属性不起作用

2 个答案: