デザイン質問：フォーラムのラジアル背景の寸法を変更する

サポート
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 では機能しないことを忘れていましたね… 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