如何在 CSS 中將低分辨率圖像轉換為背景漸變？

Question

我一直在 F12 中的 OpenAI 網站及其首頁上進行挖掘，我對主要背景非常感興趣。

圖像源鏈接到以模糊漸變形式出現在網站首頁上的 3x2 像素圖像。

我已經使用 Chrome 開發人員工具檢查了所有相關的 CSS，但我找不到任何關於他們如何做到這一點的信息。 我也在整個互聯網上搜索過，它只鏈接到使用 CSS 生成漸變。

你怎么能把這樣的低分辨率圖像做成漸變呢？

Answer 1

背景的樣式是這樣的：

background-image: url(/assets/images/home-gradient.gif?v=b0ac160331);
background-size: 100% 100%;

IE。 他們只是拉伸那個小圖像以覆蓋整個區域。

Answer 2

您可以使用 css 來創建自定義漸變，而不是使用圖像。 您可以使用線性漸變來創建鏈接您發布的圖像背景的東西。

background-image: linear-gradient(to right, #fad0c4 0%, #ffd1ff 100%);

我想這會給你同樣的效果。