0

理解できないような CSS の問題に遭遇したことはありませんが、これには困惑しています。固定の背景画像を使用したい要素があり、この特定のプロジェクトではメディア クエリを使用していないため、要素よりもかなり大きい画像を意図的に使用しています。画像を要素の幅に合わせて拡大縮小します。ただし、何らかの理由で background-attachment を固定に切り替えると、画像は親要素の境界を基準点として使用します。

私はFoundation 4フレームワークを使用しています（私は常に使用しています）。そのため、親要素はrowクラスであるため、注目に値しますが、何が原因でこの問題が発生するのかわかりません。これが私が使用しているスタイル定義です (トラブルシューティングのために背景宣言を分割しました)。アイデア、誰か？

#page-content {
  min-height: $publicContentHeight;
  background-color:rgba(255,255,255,0.25);
  background-image: url('../img/paper_phren/pages.bg.fludd.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size:contain;
  background-attachment: fixed;
  box-shadow:0px -5px 10px rgba(0,0,0,.3);
}
4

3 に答える 3

1

ユースケースを見ずに言うのは難しいですが、background-sizeコンテナーをオーバーフローさせることなく、画像を任意の画面サイズの幅に合わせてスケーリングするのはうまくいかないことがわかりました。ほとんどの場合、そして私が今採用しているimgのは、背景に要素を使用しているだけです。はい、意味的には正確ではありませんが、得られるコントロールにはそれだけの価値があります。Microsoft.com や他の多くの企業が、スケーラブルな背景画像にこれを使用しています。

于 2013-10-25T19:00:42.067 に答える
0

Foundation + off-canvas + chrome + background-attachment: 修正済み = 問題。とか、聞いたことありますが……。

http://foundation.zurb.com/forum/posts/1799-an-off-canvas-story "1- windows のクロムのみ (またはインターネットで言う): background-attachment: アニメーションで奇妙な動作を修正しました。特にセルフ アニメーション化された offcanvas をすべての固定バックに巻き付けます。注意: これは Zurb とは関係ありませんが、chrome とは関係ありません。

于 2014-04-17T05:54:46.177 に答える
0

要素を塗りつぶそうとしているので、背景画像が比率に応じて高さまたは幅のいずれかで要素の外側に拡大してもかまいませんか? はいの場合は、次を試してください: background-size:cover;

于 2013-10-25T17:30:40.410 に答える