html - Background Gradient property is not working

Question

Welcome To Ask or Share your Answers For Others

html - Background Gradient property is not working

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Background Gradient property is not working

Can someone explain why isn't my Background Gradient property is not working.
How to achieve the background gradient without altering the position property?
NOTE : When I remove the position property from div with class="parent" it works.
And any suggestion to better the code is also appreciated.

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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:07:14+0000

Here your are facing two issues. First you have to consider that by making the .parent element absolute position, you remove it from the flow and since it's the only child of the body this one will have a height equal to 0.

Considering this the background may still work in some cases. If you use a background-color or a background-image you will be able to see them even if you have height equal to 0:

body {
  background: red;
  margin:0;
}

Categories

html - Background Gradient property is not working

html - Background Gradient property is not working

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags