我想要同时具有线性和径向渐变的背景。线性应显示blue->white
渐变,而径向应在其顶部显示圆点图案。我遵循了W3Schools上的指南,但无法同时显示它们。我已经为这个问题附上了一个codeandbox。谁能帮我一下,告诉我我在这里想念的东西吗?
我想要这样的东西
但是不是星星,它应该显示圆圈,它们需要覆盖整个页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
.container {
height: 100vh;
width: 100vw;
/* Controls size of dot */
background-image: linear-gradient(#ffffff 44%, #01a2ce 100%, #ffffff 0%),
radial-gradient(black 20%, white 20%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size: auto, 50px, 50px;
}
</style>
</head>
<body>
<div class="container">
<h3>
I want to display both the linear and radial backgrounds here. Linear
will show the blue->white gradiant and radial will show the black polka
dots.
</h3>
</div>
</body>
</html>
您需要像下面那样校正梯度:
.container {
height: 100vh;
background-image:
radial-gradient(black 20%, transparent 21%), /* the radila on the top and a transparent color at the end */
linear-gradient(#ffffff 44%, #01a2ce 100%, #ffffff 0%);
background-size: 50px 50px, auto; /* no comma between 50px and 50px*/
}
<div class="container">
</div>