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

支持
1

I’ve added a subtle .svg background PATTERN (which repeats) to my theme CSS, using the following code:

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

The default .wrap area in a new Discourse installation is max-width: 1110px; Currently my background is a little distracting to the conversation text in the middle of the page (the main content area).

I would like to have the main-outlet, center area where text and discussions are taking place, 0% opaque in the very center, showing just a white background, and then apply some kind of gradient that gradually increases the opacity of my background to 100%, which would show the background around all the edges.

This is currently how my background appears… at 100% opacity, on the entire page…

image
image1655×1713 777 KB

Here’s what I would like to have happen…
I’d like the general area (doesn’t have to be exact), outlined in red, to have my background with 0% opacity, thus leaving the default, completely white background. (idk, but this may require a bi-linear horizontal gradient overlay to my background that would go from #FFFFFF (white) in the center, to transparent on the edges)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Here’s an example of what I’d like the page to look like…

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

I can accomplish this :arrow_up:︎ using a background image that’s not an svg but it was so granulated. I wanted a high quality images as my background so I’m currently using the svg.

If anyone has an idea of how I could make these adjustments, I would love to hear your thoughts!

2

Perhaps @Johani or @awesomerobot can advise here?

3

Right, a gradient overlay is probably the best approach… you can define two backgrounds at once like this:

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;
}

Or if you only want this background gradient on topic pages and not other pages (like profiles, topic lists, etc)… you could put the pattern on body, and then the gradient background on top of that in .archetype-regular #main-outlet { }

4

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

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

image
image1478×1364 486 KB

5

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