Crea un overlay a gradiente di sfondo sulla pagina, rendendo l'area di discussione bianca

Supporto
1

Ho aggiunto un sottile PATTERN di sfondo .svg (che si ripete) al CSS del mio tema, utilizzando il seguente codice:

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

L’area .wrap predefinita in una nuova installazione di Discourse ha max-width: 1110px;. Attualmente, lo sfondo è un po’ di distrazione per il testo della conversazione al centro della pagina (l’area del contenuto principale).

Vorrei che l’area centrale main-outlet, dove avviene il testo e le discussioni, avesse un’opacità del 0% esattamente al centro, mostrando solo uno sfondo bianco, e poi applicare una sorta di gradiente che aumenti gradualmente l’opacità del mio sfondo fino al 100%, in modo da mostrare lo sfondo lungo tutti i bordi.

Attualmente, il mio sfondo appare così… con un’opacità del 100%, su tutta la pagina…

image
image1655×1713 777 KB

Ecco cosa vorrei che accadesse…
Vorrei che l’area generale (non deve essere esattamente quella), evidenziata in rosso, avesse il mio sfondo con un’opacità del 0%, lasciando così lo sfondo bianco predefinito completamente visibile. (Non lo so, ma potrebbe essere necessario un overlay di gradiente orizzontale bi-lineare sul mio sfondo, che vada da #FFFFFF (bianco) al centro, fino al trasparente sui bordi)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Ecco un esempio di come vorrei che apparisse la pagina…

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

Posso ottenere questo risultato :up_arrow:︎ utilizzando un’immagine di sfondo che non sia un SVG, ma risultava troppo granulosa. Volevo un’immagine di alta qualità come sfondo, quindi sto attualmente utilizzando il file SVG.

Se qualcuno ha un’idea su come apportare queste modifiche, sarei felice di ascoltare i vostri suggerimenti!

2

Forse @Johani o @awesomerobot possono consigliare qui?

3

Giusto, un overlay a gradiente è probabilmente l’approccio migliore… puoi definire due sfondi contemporaneamente in questo modo:

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

Oppure, se vuoi applicare questo gradiente di sfondo solo alle pagine dei topic e non ad altre pagine (come profili, liste di topic, ecc)… potresti impostare il pattern su body, e poi sovrapporre il gradiente di sfondo in .archetype-regular #main-outlet { }

4

Kris! Ha funzionato splendidamente (vedi immagine in basso)! Grazie mille per la risposta rapida!!

Un’ultima domanda… dal punto di vista delle migliori pratiche e dell’efficienza, questo è il modo migliore per ottenere ciò che voglio? È la soluzione più “leggera” ed efficiente? O avere un’immagine statica che non si ripete, o qualche altra soluzione, sarebbe un modo migliore per fare ciò che sto cercando di fare, utilizzando meno risorse/banda, ecc.?

image
image1478×1364 486 KB

5

Il mio parere è che un motivo ripetuto con un gradiente CSS sarebbe l’approccio migliore… Un’immagine statica sarebbe probabilmente significativamente più grande, e il download di un file più grande ha probabilmente un impatto maggiore rispetto a qualsiasi altra cosa (di sicuro consumerebbe più larghezza di banda rispetto al CSS che crea il gradiente).