0

div を使用して Web ページの基本的なレイアウトを作成し、その背景に画像を設定したいと考えています。画像が小さいので、それらを引き伸ばして div を埋めたいと思います。

それを行うには多くの方法があります。しかし、私は次のことを試しました：

</html>
<head>
    <style>
       img#bg {  
         top:0;
         left:0; 
         width:100%;
         height:100%;
       } 
   <style>
<head>
<body>
  <img src="body.jpg" alt="background image" id="bg" />
  <div id="content"> </div>
<body>
</html>

これはうまくいきました。それをレイアウトに生かしてみました。

    <div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>        
    <div id="content"  >
        <img src="body.jpg" alt="background image" id="bg" />
    </div>

これも機能しました。しかし、float:left または CSS 幅が設定された div に対してこの方法で画像を設定しようとすると、うまくいきませんでした:

  <div id="header" style="zindex=1;height:300px;width:100%"></div>
    <div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>        
    <div id="content" style="float:right" >
        <img src="body.jpg" alt="background image" id="bg" />
    </div>

これは機能しません。最後の HTML 通知で float:right. jQueryメソッドなどではなく、このメソッドに固執したいと思います。また、これを学んでいるときに、ここで何が間違っているのか、CSSの変更で望ましい結果を得るために何をすべきかを知りたいです。

4

3 に答える 3

2

背景画像が必要なようです

良い説明はここにあります

基本的に、CSSを使用してdivに背景を持たせることができ、内部にタグを配置する必要はありません。これはほとんどの場合望ましいことです。

例のコードは次のとおりです。

body {
   background-image: url('body.jpg');
   background-size: cover;
}
于 2012-12-18T11:15:36.713 に答える
0

height: 100%, Top:0etcが機能するためには、position要素に適用する必要があります。

与えられたサンプルコードのとおりではありません。より多くのコードを与えると私はより多くを助けることができます。しかし、あなたが与えたものから、これはあなたの問題です。

于 2012-12-18T11:15:48.703 に答える
0 
background-size: cover;

良い解決策ですが、CSS3 であるため、ブラウザーのサポートについてはわかりません。

私はフィドルを作りました、これはあなたが探していたものですか？ http://jsfiddle.net/NQY6B/5/

ちなみに、「zindex」を「z-index」に変更。

編集: div のテキスト コンテンツでフィドルを更新しました

于 2012-12-18T11:31:13.427 に答える