ページに背景グラデーションオーバーレイを作成し、ディスカッションエリアを白にする

サポート
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

クリス！それがうまくいきました（下の画像をご覧ください）！迅速な対応を本当にありがとうございます！！

もう一つ質問があります…ベストプラクティスと効率性の観点から、これが望むことを達成する最良の方法でしょうか？これが最も「軽量」で効率的なソリューションですか？それとも、繰り返し表示されない静的画像を使用するか、他の解決策の方が、リソースや帯域幅などをより少なく使いながら、私が行おうとしていることを実現する良い方法でしょうか？

image
image1478×1364 486 KB

5

私の推測では、CSS グラデーションを用いた繰り返しパターンが最良のアプローチでしょう。静的な画像を使用するとファイルサイズが大幅に大きくなる可能性が高く、大きなファイルのダウンロードが他の要素よりもはるかに大きな影響を与えると考えられます（グラデーションを生成する CSS よりも明らかに多くの帯域幅を消費するでしょう）。