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

问题描述 投票：0回答：1

我想要同时具有线性和径向渐变的背景。线性应显示blue->white渐变，而径向应在其顶部显示圆点图案。我遵循了W3Schools上的指南，但无法同时显示它们。我已经为这个问题附上了一个codeandbox。谁能帮我一下，告诉我我在这里想念的东西吗？

我想要这样的东西

enter image description here

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

<!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>
html css background linear-gradients radial-gradients
1个回答
0
投票

您需要像下面那样校正梯度：

.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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.