CSS

Question

我想要一个同时具有线性和径向渐变的背景。线性应显示 blue->white 渐变，径向应在其顶部显示圆点图案。我遵循了 W3Schools 上的指南，但我无法让它们同时显示。我已经为这个问题附上了一个codesandbox。任何人都可以帮助我并告诉我我在这里缺少什么吗？

我想要这样的东西

但是它应该显示圆圈而不是星号，并且它们需要覆盖整个页面。

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

Answer 1

您需要像下面这样更正渐变：

.container {
  height: 100vh;
  background-image: 
    /* the radial on the top and a transparent color at the end */
    radial-gradient(black 20%, transparent 21%), 
    linear-gradient(#ffffff 44%, #01a2ce 100%);
  background-size: 50px 50px, auto; /* no comma between 50px and 50px*/
}

<div class="container">

</div>

CSS - 同时显示线性和径向背景

CSS - Show both linear and radial backgrounds together

html

background

linear-gradients

radial-gradients