web-dev-qa-db-ja.com

Twenty Seventeen WordPressテーマ内のCSS視差の問題

これが適切な場所であることを願っています。 WP開発者を試しましたが、質問はトピック外と見なされました。

WordPress（4.8.2）のTwenty Seventeenテーマを使用し、静的なフロントページに4つのセクションを追加しています。一番上で、下にスクロールすると、ロゴ、サイト名、タグラインがオープニング画像の上にスクロールアップします。ロゴ、タイトル、キャッチフレーズグループの背景がはっきりしているため、背景画像が透けて見えます。

さらに下にスクロールすると、2番目の画像が表示されます。1番目の画像が画面外にスクロールし、メニューが一番上に表示されると完全に表示されます。スクロールを続けると、次のセクションのテキストが上にスクロールして、2番目の画像を覆います。ただし、このテキストの背景は白で（私の場合）、画像は透けて見えません。

これは、残りの画像/テキストペアの場合と同じ動作です。どうすればよいか知りたいのは、最上部のセクションのように、これらのテキストセクションの背景を明確にすることです。私は彼らの色をどのように変えることができるかを見てきましたが、どのようにそれを透明にすることができるかを見ていません。

どんな助けも大歓迎です。

wordpresscss
1
John Biddle

この回答は、Wordpress.orgフォーラムでAndrew Nevinsによって提供されました。

.site-content-contain {background-color：透明; }

見つけたら簡単です。

1
John Biddle

これは古い質問ですが、回答後にcssが変更された可能性があります。

今この問題に遭遇した場合。小さな画面には、20remの@media画面ブレークポイントがあります。これにより、2つの列コンテンツブロックが単一の列に折りたたまれます。

ただし、そのブレークポイントは、視差効果を与えるcssのビットも非アクティブにします。

効果を取り戻すには、cssの一部を@media breakブロックの外側またはカスタムcssファイルにコピーします。参考までに、効果を取り戻すためのcssは次のとおりです。

.background-fixed .panel-image {
    background-attachment: fixed;
}
1
thedanindanger

どの要素が関係しているかを見つけるには、ブラウザ開発者ツールを使用する必要があります。その後、CSSをオンザフライで調整して、どの変更が目的の結果を達成するかを確認できます。それができたら、スタイルシートまたはカスタムCSSにCSSの変更を適用します

1
Steve