Bootstrap 如何创建淡出研磨背景

ncecgwcz 于 2023-08-01 发布在 Bootstrap

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

我想创建一个淡出的网格背景
到目前为止，我已经尝试了一个圆锥梯度背景，但我不知道如何让它淡出

background:
    conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0) 
    0 0/50px 50px;

字符串

twitter-bootstrap

来源：https://stackoverflow.com/questions/76683644/how-to-create-a-fading-out-grind-background

2条答案

按热度按时间

vcirk6k61#

最简单的解决方案是添加一个额外的背景图像，其中linear-gradient从透明到白色：

body {
  background:
    linear-gradient(180deg, #FFF0 0%, #FFFF 100%) 0 0 / 100dvw 100dvh,
    conic-gradient(from 90deg at 1px 1px, #8880 90deg, #888F 0) center -1px / 50px 50px;
}

字符串
或者如果你使用一些身高：

* { margin:0; box-sizing: border-box; }

body {
  min-height: 100vh;
  background:
    linear-gradient(180deg, #FFF0 0%, #FFFF 100%),
    conic-gradient(from 90deg at 1px 1px, #8880 90deg, #888F 0) center -1px / 50px 50px;
}

型

赞(0）回复(0）举报 2023-08-01

nwsw7zdq2#

1.您可以使用{ filter: blur(4px); }参考：这里是a link！

赞(0）回复(0）举报 2023-08-01