Créer un overlay de dégradé d'arrière-plan sur la page pour rendre la zone de discussion blanche

Soutien
1

J’ai ajouté un motif d’arrière-plan .svg subtil (qui se répète) à mon CSS de thème, en utilisant le code suivant :

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

La zone .wrap par défaut dans une nouvelle installation de Discourse a une max-width: 1110px;. Actuellement, mon arrière-plan est un peu distrayant pour le texte de conversation au milieu de la page (la zone de contenu principale).

Je souhaiterais que la zone centrale, main-outlet, où le texte et les discussions ont lieu, soit à 0 % d’opacité au centre exact, affichant simplement un arrière-plan blanc, puis appliquer un dégradé qui augmenterait progressivement l’opacité de mon arrière-plan jusqu’à 100 %, ce qui permettrait d’afficher l’arrière-plan sur tous les bords.

Voici à quoi ressemble actuellement mon arrière-plan… à 100 % d’opacité, sur toute la page…

image
image1655×1713 777 KB

Voici ce que je souhaiterais voir se produire…
Je voudrais que la zone générale (qui n’a pas besoin d’être exacte), délimitée en rouge, affiche mon arrière-plan avec 0 % d’opacité, laissant ainsi l’arrière-plan blanc par défaut, complètement opaque. (Je ne sais pas, mais cela pourrait nécessiter une superposition de dégradé horizontal bilinéaire sur mon arrière-plan, passant du #FFFFFF (blanc) au centre, à transparent sur les bords)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Voici un exemple de l’apparence que je souhaite donner à la page…

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

Je peux réaliser cela :up_arrow:︎ en utilisant une image d’arrière-plan qui n’est pas un SVG, mais elle était très granuleuse. Je voulais une image de haute qualité pour mon arrière-plan, c’est pourquoi j’utilise actuellement le SVG.

Si quelqu’un a une idée sur la façon dont je pourrais apporter ces ajustements, j’aimerais beaucoup entendre vos suggestions !

2

Peut-être que @Johani ou @awesomerobot peuvent donner un avis ici ?

3

Exactement, un superposition de dégradé est probablement la meilleure approche… vous pouvez définir deux arrière-plans à la fois comme ceci :

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

Ou si vous ne voulez ce dégradé d’arrière-plan que sur les pages de sujets et pas sur les autres pages (comme les profils, les listes de sujets, etc)… vous pourriez placer le motif sur body, puis le dégradé d’arrière-plan par-dessus dans .archetype-regular #main-outlet { }

4

Kris ! Ça a fonctionné à merveille (voir l’image ci-dessous) ! Merci beaucoup pour ta réponse rapide !!

Une dernière question… du point de vue des bonnes pratiques et de l’efficacité, est-ce la meilleure façon de réaliser ce que je veux faire ? Est-ce la solution la plus « légère » et efficace ? Ou bien l’utilisation d’une image statique qui ne se répète pas, ou une autre solution, serait-elle préférable pour atteindre mon objectif tout en consommant moins de ressources/bande passante, etc. ?

image
image1478×1364 486 KB

5

Mon avis est qu’un motif répétitif avec un dégradé CSS serait la meilleure approche… Une image statique serait probablement nettement plus volumineuse, et le téléchargement d’un fichier plus important a probablement un impact plus important que tout le reste (consommerait certainement plus de bande passante que le CSS qui crée le dégradé).