英文:
How to create a fading-out grind background
问题
我想创建一个渐变消失的网格背景
background:
conic-gradient(from 90deg at 1px 1px, #0000 90deg, grey 0)
0 0/50px 50px;
英文:
I want to create a grid background that fades out
So far I've tried a conic-gradient background but I'm not sure how to get it to fade out
background:
conic-gradient(from 90deg at 1px 1px,#0000 90deg,grey 0)
0 0/50px 50px;
答案1
得分: 3
最简单的解决方案是添加一个额外的背景图像，其中包含从透明到白色的线性渐变：
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;
}
或者如果你使用了一些body的高度：
* { 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;
}
英文:
The simplest solution would be add an additional background-image that has linear-gradient from transparent to white:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
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;
}
<!-- end snippet -->
or if you use some body height:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* { 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;
}
<!-- end snippet -->
答案2
得分: -2
你可以使用 { filter: blur(4px); } 参考链接：这是 一个链接！
英文:
- You can Use
{
filter: blur(4px);
}
reference:
Here's a link!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论