1

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

<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>
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 回答