如何创建一个渐变消失的磨砂背景。

huangapple go评论64阅读模式
英文:

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); } 参考链接:这是 一个链接

英文:
  1. You can Use
    {
    filter: blur(4px);
    }

    reference:
    Here's a link!

huangapple
  • 本文由 发表于 2023年7月14日 06:31:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/76683644.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定