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>