如何在css中创建一个以线性渐变为背景的圆点纹理？

bhmjp9jg 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(132)

下面是一个渐变背景：

body {
  background: linear-gradient(to right, red , yellow);
}

下面是Polka Dot CSS：

body {
  background-color: #94fcc8;
  opacity: 1;
  background-image:  radial-gradient(#7c7c50 0.9500000000000001px, transparent 0.9500000000000001px), radial-gradient(#7c7c50 0.9500000000000001px, #94fcc8 0.9500000000000001px);
  background-size: 38px 38px;
  background-position: 0 0,19px 19px;
}

我怎么才能把它们融合在一起呢
下面是codepen：https://codepen.io/danichk/pen/YyVeXa
先谢谢你了。

css

来源：https://stackoverflow.com/questions/76334032/how-to-create-a-polka-dot-texture-with-linear-gradient-as-background-in-css

2条答案

按热度按时间

tvmytwxo1#

如评论
background-image接受以逗号分隔的图像/渐变列表，background-..和..-blend-mode属性也是如此。值的顺序很重要...
片段

body {
  background: wheat;

  background-image: radial-gradient(salmon 20%, transparent 0), /* polka dots */
                    radial-gradient(salmon 20%, transparent 0),
                    linear-gradient(to right, red , yellow); /* your gradient */

  background-size: 30px 30px, /* polka dots */
                   30px 30px,
                   100% 100%; /* your gradient */

  background-position: 0 0, 15px 15px;
  /* Without a 3rd set of values, the 3rd gradient
     will default to the first set of values (0 0) */
}

赞(0）回复(0）举报 2023-05-30

hs1rzwqc2#

html {
  --g:/30px 30px radial-gradient(salmon 20%, #0000 0);
  background:
    0 0 var(--g),15px 15px var(--g),
    linear-gradient(45deg,red,blue);
  min-height: 100%;
}

赞(0）回复(0）举报 2023-05-30

我来回答

如何在css中创建一个以线性渐变为背景的圆点纹理？

2条答案

相关问题

热门标签

最新问答