Создать градиентный фон на странице, оставив область обсуждения белой

Поддержка
1

Я добавил ненавязчивый повторяющийся .svg-фоновый узор в CSS своей темы, используя следующий код:

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

По умолчанию область .wrap в новой установке Discourse имеет max-width: 1110px;. В настоящее время мой фон немного отвлекает от текста обсуждения в центре страницы (основная область контента).

Я хотел бы, чтобы центральная область main-outlet, где размещаются текст и обсуждения, имела непрозрачность 0% в самом центре, показывая просто белый фон, а затем применялся какой-то градиент, который постепенно увеличивал бы непрозрачность моего фона до 100%, чтобы фон был виден по всем краям.

Вот как мой фон выглядит сейчас… с непрозрачностью 100% на всей странице…

image
image1655×1713 777 KB

Вот что я хотел бы получить…
Я хотел бы, чтобы общая область (не обязательно точная), обведенная красным, имела мой фон с непрозрачностью 0%, оставляя тем самым фон по умолчанию полностью белым. (не знаю, но для этого может потребоваться билинейный горизонтальный градиентный оверлей к моему фону, который переходил бы от #FFFFFF (белый) в центре к прозрачному по краям)

SAMPLE GRADIENT
SAMPLE GRADIENT1598×2010 1.35 MB

Вот пример того, как я хотел бы, чтобы страница выглядела…

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

Я могу добиться этого :up_arrow:︎, используя фоновое изображение, которое не является SVG, но оно было слишком зернистым. Я хотел использовать высококачественное изображение в качестве фона, поэтому в настоящее время использую SVG.

Если у кого-то есть идеи, как можно внести эти изменения, я буду рад услышать ваши мысли!

2

Возможно, @Johani или @awesomerobot смогут дать совет здесь?

3

Верно, градиентное наложение, вероятно, лучший подход… вы можете определить два фона одновременно, например так:

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

4

Крис! Это сработало блестяще (см. изображение ниже)! Большое спасибо за быстрый ответ!

Ещё один вопрос… с точки зрения лучших практик и эффективности, является ли это лучшим способом достичь того, что я хочу? Является ли это самым «лёгким» и эффективным решением? Или использование статичного изображения, которое не повторяется, или какое-то другое решение, было бы лучшим способом сделать то, что я пытаюсь сделать, используя меньше ресурсов/пропускной способности и т.д.?

image
image1478×1364 486 KB

5

Мой прогноз: повторяющийся паттерн с использованием CSS-градиента — наиболее оптимальное решение. Статичное изображение, скорее всего, будет значительно больше по размеру, а загрузка более тяжёлого файла, вероятно, окажет большее влияние на производительность, чем любые другие факторы (безусловно, это потребует больше пропускной способности, чем CSS-код, создающий градиент).