CSS：背景顶部的径向渐变层 CSS 样式

Question

我有一个 CSS 样式的支票（平方）背景：

background-color: #2F5EC1;
    background-image:
    linear-gradient(rgba(255,255,255,.1) 2px, transparent 2px), 
    linear-gradient(90deg, rgba(255,255,255,.1) 2px, transparent 2px), 
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), 
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); 
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; 
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; 

我想让线条在边缘淡出，在理想的世界中，我的第一个想法是在顶部分层另一个背景颜色/径向渐变，沿着 #2F5EC1 的线条（背景蓝色)，在中间淡入完全透明，通过向页面中心淡入的线条显示。

我之前在背景图像上看到过半透明的颜色，但我不确定如何使用当前设置实现这一点，例如颜色上的颜色

非常感谢任何帮助！ 谢谢！

我正在尝试制作的大致图像 - 我知道检查看起来有点不同，但你希望你能了解褪色位的外观！

:)

Answer 1

我希望它对你有用，没有太多要解释的，所以代码会为我说话

 #app { position: absolute; width: 100vw; height: 100vh; background-color: #2f5ec1; background-size: 40px 40px; background-image: linear-gradient(to right, white 1px, transparent 1px), linear-gradient(to bottom, white 1px, transparent 1px); } #layout { position: absolute; width: 100vw; height: 100vh; background: rgb(47, 94, 193); background: radial-gradient( circle, rgba(63, 94, 251, 0.4) 0%, rgba(63, 94, 193, 1) 100% ); }

 <div id="app"></div> <div id="layout"></div>