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

bhmjp9jg  于 2023-05-30  发布在  其他
关注(0)|答案(2)|浏览(131)

下面是一个渐变背景:

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
先谢谢你了。

tvmytwxo

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) */
}
hs1rzwqc

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%;
}

相关问题