Вопрос по дизайну: Изменить размеры радиального фона форума

Поддержка
1

У меня есть дополнительный вопрос к этому посту: Create background gradient overlay on page, making the discussion area white

IMG_3CFC38C5EDA2-1
IMG_3CFC38C5EDA2-11125×2436 921 KB

Обратите внимание, что в нижней части форума на мобильных устройствах фон конкурирует с блоком «Предлагаемые темы».

Что если я хочу увеличить непрозрачность градиента по мере продвижения к низу страницы (по оси Y), оставив верх без изменений? Мой текущий код выглядит так…

body {
 background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto  ;
 background-attachment: fixed;
}

Вот как выглядит фон, создаваемый этим кодом на сообществе:

image
image1299×1597 385 KB

На рабочем столе фон не слишком сильно мешает блоку «Предлагаемые темы», но на мобильных устройствах он кажется немного слишком плотным.

Снова хочу сделать его более непрозрачным в нижней части по оси Y. Есть ли способ доработать мой код?

2

Думаю, я нашел небольшой хак. Возможно, это не лучшее решение, но оно точно делает то, что мне нужно, поэтому я запишу его здесь. Надеюсь, если это плохое решение, кто-нибудь вмешается!

CSS по умолчанию для области «Предлагаемые темы» в нижней части экрана выглядит так:

.suggested-topics {
    clear: left;
    padding: 20px 0 15px 0;
}

Поэтому я добавил следующее в свой пользовательский CSS (я не трогал свойство «clear: left»)…

.suggested-topics {
    padding: 20px;
    background: rgba(255, 255, 255, 0.6);
}

Это сработало довольно хорошо!

Вот сравнение до и после на мобильном устройстве:

background opacity tweak
background opacity tweak2938×3028 1.25 MB

3

Ах да, я забыл, что background-attachment: fixed не работает на iOS… Они отключили эту функцию, потому что, apparently, это приводит к перерисовке всего экрана при прокрутке, что плохо сказывается на производительности.

Есть обходные пути…

пример CSS 
body.mobile-view {
  background: none;
}

body.mobile-view:after {
  content:"";
  position:fixed;
  left:0;
  top:0;
  right:0;
  bottom:0;
  z-index:-1;
  display:block;
  background: radial-gradient(circle at center, rgba(255,255,255,1) 50%, rgba(255,255,255,0)) fixed, url(https://forums.pickleballist.com/uploads/default/original/1X/e7792afe9a5b7fbd26141c3c21e82b70cd495069.svg) center top / 300px auto;
  background-size:cover;
}

…хотя, даже если они включат эту функциональность, проблемы с производительностью всё равно останутся, так что, возможно, стоит попробовать совершенно другой подход к фону для мобильных устройств, если вас не устраивает текущий вариант.

4

Блестяще! Спасибо @awesomerobot! Всегда ценим ваши безумные навыки в дизайне!

source
source691×658 1.09 MB