Crie uma sobreposição de gradiente de fundo na página, deixando a área de discussão branca

Suporte
1

Adicionei um padrão de fundo .svg sutil (que se repete) ao CSS do meu tema, usando o seguinte código:

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

A área .wrap padrão em uma nova instalação do Discourse tem max-width: 1110px;. Atualmente, meu fundo está um pouco distrativo para o texto da conversa no meio da página (a área de conteúdo principal).

Gostaria que a área central main-outlet, onde ocorrem os textos e discussões, tivesse 0% de opacidade exatamente no centro, mostrando apenas um fundo branco, e então aplicar algum tipo de gradiente que aumente gradualmente a opacidade do meu fundo até 100%, fazendo com que o fundo apareça em todas as bordas.

Esta é a aparência atual do meu fundo… com 100% de opacidade, em toda a página…

image
image1655×1713 777 KB

Aqui está o que gostaria que acontecesse…
Gostaria que a área geral (não precisa ser exata), delimitada em vermelho, tivesse meu fundo com 0% de opacidade, deixando assim o fundo branco padrão completamente visível. (não sei, mas isso pode exigir uma sobreposição de gradiente bilinear horizontal no meu fundo, que vá de #FFFFFF (branco) no centro até transparente nas bordas)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Aqui está um exemplo de como gostaria que a página ficasse…

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

Posso fazer isso :up_arrow:︎ usando uma imagem de fundo que não seja SVG, mas ela ficava muito granulada. Queria uma imagem de alta qualidade como fundo, então estou usando o SVG no momento.

Se alguém tiver uma ideia de como fazer esses ajustes, adoraria ouvir suas sugestões!

2

Talvez @Johani ou @awesomerobot possam aconselhar aqui?

3

Certo, uma sobreposição de gradiente é provavelmente a melhor abordagem… você pode definir dois fundos ao mesmo tempo assim:

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, se você quiser esse gradiente de fundo apenas nas páginas de tópicos e não em outras páginas (como perfis, listas de tópicos, etc)… você pode colocar o padrão no body e, em seguida, o fundo com gradiente por cima em .archetype-regular #main-outlet { }

4

Kris! Isso funcionou brilhantemente (veja a imagem abaixo)! Muito obrigado pela resposta rápida!!

Mais uma pergunta… do ponto de vista das melhores práticas e eficiência, essa é a melhor maneira de fazer o que eu quero? É a solução mais “leve” e eficiente? Ou ter uma imagem estática que não se repete, ou alguma outra solução, seria uma maneira melhor de fazer o que estou tentando fazer, usando menos recursos/banda, etc?

image
image1478×1364 486 KB

5

Minha aposta é que um padrão repetitivo com um gradiente CSS seria a melhor abordagem… Uma imagem estática provavelmente seria significativamente maior, e baixar um arquivo maior provavelmente tem um impacto maior do que qualquer outra coisa (certamente consumiria mais largura de banda do que o CSS que cria o gradiente).