CSS - одновременно показывать линейный и радиальный фон - PullRequest
Новая
       117

CSS - одновременно показывать линейный и радиальный фон

1 голос
/ 29 мая 2020

Мне нужен фон с линейными и радиальными градиентами. Линейный должен отображать градиент blue->white, а радиальный должен отображать узор в горошек поверх него. Я следовал руководству на W3Schools , но не могу заставить их отображать оба одновременно. Я прикрепил код и ящик для этой проблемы. Может ли кто-нибудь помочь мне и сказать, чего мне здесь не хватает?

Я хочу что-то вроде этого

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>

1 Ответ

1 голос
/ 29 мая 2020

Вам необходимо скорректировать градиент, как показано ниже: 

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