设计问题：更改论坛径向背景尺寸

支持
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 上不起作用……他们禁用了这个功能，因为据说滚动时会导致整个屏幕重绘，这对性能很不利。

不过有一些变通方法……

示例 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