Question

我有两张图片，我需要在另一张图片中使用，同时将它们保留在背景中，目前我使用了以下代码：

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

其中about_splash具有后台css属性

问题是，这两个图像需要在其他一些html对象的背景中。这将在div＃about_splash之上和之下。

我尝试使用z-index，但是没有用。

如果我使用以下代码，我如何缩放内部图像，使其比父图像大一点

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

    </div>
</div>

Answer 1

编辑： 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;
}

Answer 2

试着看看这个，http://www.w3schools.com/cssref/pr_pos_z-index.asp可能会给你更多的想法，而且你可以在底部进行测试。

谢谢，大卫

Answer 3

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*/
}

可以找到上述代码段的演示here。

将图像叠加在另一个上并将它们保留在后台

3 个答案: