4

次のcss3 コードを使用して、背景画像をブラウザー ウィンドウのほぼ完全な 100% にします。

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

ただし、Zurb Foundation 3 css フレームワークも使用すると、body要素の背景が自動的に白くなります...そのため、上記の背景画像は非表示になっています。明らかにそれをオーバーライドできますが、上記のような背景を Foundation で特別な方法で処理する必要があると考えさせられます。本当？または、これも必要ですか：

body {
  background: transparent !important;
}
4

3 に答える 3

2

私は Foundation 5 を使用していますが、イメージでは使用しません。代わりにグラデーションを使用しますが、イメージを使用する場合も同じことが当てはまります。. .

バナー

<div id="banner">
    <div class="row">
        <div class="small-12 columns">Some Content Here</div>
    </div>
</div>

CSS - 幅と Z-INDEX に注意してください。これは、背景がページ幅の 100% を占め、Z-index が他の要素の基礎の下に配置されることを意味します。これを適用する最良の方法は、ページ上にあります。または、foundation.min.css の後にロードされるスタイルシートで、それ以外の場合は、foundation のプリセットをオーバーライドしません。

#banner{
    width:100%;
    height:100%;
    min-height:100%;
    z-index:-999;
    background: url(images/bg.jpg) no-repeat center center fixed; 
    margin:0;padding:0;
}
于 2014-04-27T17:50:25.713 に答える
0

編集注: 申し訳ありませんが、あなたが配置した !important プロパティ項目は Zurb コードだと思いました。いずれにせよ、私はそれが何の価値があるかについて私の答えを残します.

私は Zurb Foundation 3 に詳しくありませんが、通常、開発者が !important プロパティを使用するのは、それがコードの残りの部分に不可欠であり、上書きされたくないためです。ただし、継承しない背景について話しているため、 body タグの背景プロパティが実際に「重要」になる方法がわかりません。削除するとレイアウトが壊れます。

本文の z-index と、開発者が特定のアイテムを本文の後ろに配置する方法について考えていましたが、これを見たことがないため、なぜこれを行う必要があるのか​​ わかりません。さらに、負の z-index は体の後ろに何かを配置することになっていると思いますが、これが起こることはありません。体の後ろに div を隠そうとする私のさまざまなフィドルを見てください。

http://jsfiddle.net/W9ckz/1/ http://jsfiddle.net/W9ckz/2/ http://jsfiddle.net/W9ckz/3/ http://jsfiddle.net/W9ckz/4/

したがって、体の背景をオーバーライドするとレイアウトが壊れる可能性があり、それがその効果に対する脅威であることを証明できる別の方法を考えられない限り (私が考えた z-index とは異なり)、それを採用することをお勧めします。最悪の事態は、元に戻さなければならないことです。

I think you can remove the body background
property altogether without side effect.
于 2013-02-06T06:46:07.990 に答える
0

代わりにあなたhtmlのスタイルを適用しますbody 。結果は同じで、Foundation のデフォルトの白い背景を上書きします。

于 2013-02-06T12:18:46.707 に答える