创建页面背景渐变叠加，使讨论区域为白色

支持
1

我在主题 CSS 中添加了一个微妙的重复 .svg 背景图案，使用的代码如下：

body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}

在新安装的 Discourse 中，默认的 .wrap 区域最大宽度为 1110px。目前，我的背景在页面中间（主要内容区域）的对话文本上略显干扰。

我希望在页面正中央的主输出区域（即文本和讨论发生的地方）将不透明度设为 0%，仅显示纯白色背景；然后应用某种渐变效果，使背景的不透明度逐渐增加至 100%，从而在页面边缘显示出背景图案。

目前我的背景显示效果如下……在整个页面上以 100% 不透明度显示：

image
image1655×1713 777 KB

我希望实现的效果如下……
我希望用红色标出的大致区域（不必完全精确）显示我的背景，但不透明度为 0%，从而保留默认的纯白色背景。（我不确定，但这可能需要在背景上叠加一个双线性水平渐变，从中心的 #FFFFFF（白色）渐变到边缘的透明）

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

以下是我希望页面呈现的效果示例：

Monosnap 2019-12-13 10-20-04
Monosnap 2019-12-13 10-20-041004×1324 258 KB

我可以使用非 SVG 的背景图像来实现上述效果 :up_arrow:︎，但那样会导致图像颗粒感过重。我希望背景图像具有高质量，因此目前使用的是 SVG。

如果任何人知道如何实现这些调整，我很乐意听取您的建议！

2

也许 @Johani 或 @awesomerobot 能在这里提供建议？

3

没错，渐变叠加层可能是最好的方案……你可以像这样同时定义两个背景：

body {
 background: radial-gradient(circle at center, rgba(255,255,255,1) 35%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top / 300px auto  ;
 background-attachment: fixed;
}

或者，如果你只希望在主题页面上显示此背景渐变，而不希望其他页面（如个人资料、主题列表等）显示……你可以将图案放在 body 上，然后将渐变背景叠加在 .archetype-regular #main-outlet { } 之上。

4

Kris！太棒了，这个方法非常有效（见下图）！非常感谢您的快速回复！！

还有一个问题……从最佳实践和效率的角度来看，这是实现我目标的最佳方式吗？这是否是最“轻量级”且高效的解决方案？或者，使用一张不重复的静态图片，或其他某种方案，是否是在节省资源/带宽等方面实现我目标的更好方法？

image
image1478×1364 486 KB

5

我的猜测是，使用带有 CSS 渐变的重复图案可能是最佳方案……静态图像的文件体积可能会大得多，而下载大文件带来的影响很可能超过其他任何因素（肯定会比生成渐变的 CSS 消耗更多带宽）。