0

現在、私のウェブサイトでいくつかの問題が発生しています。2 つの div を重ね合わせて、ぎざぎざになった場合の効果と背景を作成しようとしています。例: https://docs.google.com/drawings/d/1IdqWKdkbS-xxLrvzLF8bh5k_B6iIzmlmNJdKi8CgZSc/edit?usp=sharing . 唯一の問題は、それを機能させることができないことです。一度に 1 つの画像のみを表示します。私のコードは次のとおりです。

<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture2.jpg'); background-repeat:repeat-x; clear:both;">
<p><!--EmptySpace--></p> </div>
<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture1.jpg'); background-repeat:repeat; clear:both">    
<!--content here-->
</div>

御時間ありがとうございます。

4

1 に答える 1

0

コードは期待どおりに機能します。デフォルトでは、DIV は互いに重なりません。それらはdisplay: blockであり、ドキュメント フロー内にとどまります。つまり、2 番目の div は最初の div と最初の段落の下に配置されます。背景画像を与えるだけでは、フローから外すのに十分ではありません。位置を変える必要があります。また、インライン スタイルは使用しないでください。あなたがするたびに子猫が死ぬ。

私ならこうします。

HTML:

<div class="top_bg"></div>
<!--content here-->

CSS:

.body {
    background-image: url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture1.jpg'); 
}

.top_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: #fff url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture2.jpg') repeat-x;
}
于 2013-05-02T16:52:00.060 に答える