1

バックグラウンドで保持しながら、重ねて使用する必要がある 2 つの画像があります。現在、次のコードを使用しています。

<div id="about_splash">
<img style="width:85%" src="image_src" />
</div>

about_splash には背景の css 属性があります

問題は、これら 2 つの画像が他の html オブジェクトの背景にある必要があることです。これは div#about_splash の上下になります。

z-index を入れてみましたが、うまくいきませんでした。

次のコードを使用する場合、親よりも少し大きくなるように内側の画像を拡大縮小するにはどうすればよいですか 

    <div style="background: url(layout/images/illustration.gif) 
        no-repeat center;min-    height:500px;">

    </div>
</div>
4

3 に答える 3

2

編集: CSS3 ではこの種のことが許可されており、次のようになります。

body {
    background-image: url(images/bg.png), url(images/bgtop.png);
    background-repeat: repeat, repeat-x;
}

ただし、IE8 以下をサポートする必要がある場合、これを回避する最善の方法は、余分な div を用意することです。

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
于 2012-05-08T13:42:40.617 に答える
1

これも見てみてください。http://www.w3schools.com/cssref/pr_pos_z-index.aspでより多くのアイデアが得られるかもしれません。また、下部でテストできます。

ありがとう、デビッド

于 2012-05-08T13:58:32.480 に答える
1

Farhan Ahmadはすでに良い回答を提供していますが、私はもう少し貢献したいと思います。将来的には役立つかもしれません。

これは、コンテナを画面の真ん中に配置し、別のコンテナを最初のコンテナの真ん中に配置するために少し前に使用した小さなコード スニペットです。ポジショニングは流動的で、ビューアの解像度に依存します。

HTML:

<div id="parentContainer">
    <div id="childContainer">
       <!-- I'm the center of attention -->
    </div>
</div>​

CSS:

#parentContainer
{
    height: 200px;
    width: 200px;
    background: #9dc0dd;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px; /*This is half of the container Height*/
    margin-left: -100px; /*This is half of the container Width*/
}

#childContainer
{
    height: 100px;
    width: 100px;
    background: #435c68;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -50px; /*This is half of the container Height*/
    margin-left: -50px; /*This is half of the container Width*/
}​

上記のスニペットのデモは、ここにあります。

于 2012-05-08T15:05:24.583 に答える