jord8on
2019 年 12 月 13 日午後 6:07
1
テーマの CSS に、以下のコードを使用して、繰り返される控えめな .svg 背景パターンを追加しました。
body {
background:url(https://forums.pickleballist.com/uploads/default/original/1X/b7df60bb8a3fd1584f393dee365865ca83e4906e.svg) center top;
background-size: 300px auto;
}
新しい Discourse インストールのデフォルトの .wrap 領域は max-width: 1110px; に設定されています。現在、ページの中央（メインコンテンツエリア）の会話テキストに対して、この背景が少し邪魔になっています。
メインアウトレットの中央エリア、つまりテキストや議論が行われている部分は、真ん中で 0% の不透明度にして、白い背景のみを表示し、そこから端に向かって徐々に背景の不透明度を 100% に増やすグラデーションを適用したいと考えています。
現在の背景は、ページ全体で 100% の不透明度で表示されています…
以下のような動作を望んでいます…#FFFFFF （白）、端を透明にするグラデーションです）
以下が、ページが最終的にどのような見た目になってほしいかの例です…
これは SVG ではない背景画像を使用すれば実現できますが、画像が非常に粒状になってしまいました。背景には高品質な画像を使用したいと考えているため、現在は SVG を使用しています。
これらの調整を行う方法についてアイデアをお持ちの方がいれば、ぜひご意見を聞かせてください！
もしかして、@Johani または @awesomerobot がここでアドバイスできるでしょうか？
はい、グラデーションオーバーレイが最も適切なアプローチでしょう。以下のように、2つの背景を同時に定義できます。
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 { }でグラデーション背景を重ねることもできます。
jord8on
2019 年 12 月 28 日午前 12:43
4
クリス！それがうまくいきました（下の画像をご覧ください）！迅速な対応を本当にありがとうございます！！
もう一つ質問があります…ベストプラクティスと効率性の観点から、これが望むことを達成する最良の方法でしょうか？これが最も「軽量」で効率的なソリューションですか？それとも、繰り返し表示されない静的画像を使用するか、他の解決策の方が、リソースや帯域幅などをより少なく使いながら、私が行おうとしていることを実現する良い方法でしょうか？
私の推測では、CSS グラデーションを用いた繰り返しパターンが最良のアプローチでしょう。静的な画像を使用するとファイルサイズが大幅に大きくなる可能性が高く、大きなファイルのダウンロードが他の要素よりもはるかに大きな影響を与えると考えられます（グラデーションを生成する CSS よりも明らかに多くの帯域幅を消費するでしょう）。
