0

我不知道如何将背景图像移出它的容器。

我有一个 960 宽度的容器，居中。然后我在容器中有一个横幅，我需要在横幅后面的另一层上有一个图像，但左边距为：-100px，但使用 CSS 它不起作用，因为背景图像不能移出它们的容器。我怎么能用 jQuery 做到这一点，或者有人知道用 CSS 做的语义正确的解决方法吗？

提前致谢。

编辑： http: //i49.tinypic.com/s5wzmp.png这基本上就是我需要的样子，红色是背景图像，需要从横幅区域后面“达到峰值”，两者都在 960px 内容器。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body { background: #000;padding: 0; margin: 0; }
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; }
.image { background: url('image.png') no-repeat; height: 200px; width: 100%;  }
.banner { background: #98cb4c; height: 180px; }
</style>
</head>

<body>
    <div class="home-spot">
        <div class="image">
            <div class="banner">
            </div>
        </div>
    </div>
</body>
</html>
4

3 回答 3

1

我已经成功了！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
body { background: #000;padding: 0; margin: 0; }
.home-spot { width: 950px; height: 400px; background: #fff; margin: 0 auto; }
.image { background: url('image.png') no-repeat; height: 200px; width: 200px; position: absolute; margin-left: -100px; }
.banner { background: #98cb4c; height: 200px; width: 950px; margin-left: 100px; }
</style>
</head>

<body>
<div class="home-spot">
    <div class="image">
        <div class="banner">

        </div>

    </div>

</div>

</body>
</html>
于 2013-02-07T16:02:40.303 回答
0

为什么不直接删除背景图像，这样您就可以通过元素看到它背后的内容。如果您是通过 javascript 执行此操作，则将其移出视图与仅将其删除几乎没有区别。

编辑

我想我现在明白了。您的红色图像块需要定位为绝对值并将左侧值设置为 -100px 或其他值。然后它将浮动在它的第一个父块之外，具有除静态之外的定义位置。

这就是你想要的我认为：

http://jsfiddle.net/UF3nd/

<div id="main">
    <div id="wrap">
        <div id="banner">
            <div id="peak">
                I'm in back
            </div>
            I'm in front
        </div>
    </div>
</div>

#banner {
    background: orange;
    position: relative;
    width: 100%;
    height: 50px;
}
#peak {
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    left: -50px;
}
于 2013-02-07T15:37:06.267 回答
0

这是您可以做您想做的事情的一种方法：

http://jsfiddle.net/BuAQC/1/

的HTML：

<div class="full-width">
    <div class="width-960">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis at convallis urna. Proin id pharetra erat. Etiam fringilla sem sed leo ullamcorper sed ornare odio porttitor. Nulla ullamcorper, diam at fermentum egestas, enim nisl dapibus turpis, a sodales leo enim consequat augue. Praesent vel dapibus mauris. Fusce ut sem quis dolor condimentum accumsan in eget ipsum. Curabitur placerat molestie justo, sit amet viverra lectus euismod id. Etiam leo elit, iaculis sit amet imperdiet consectetur, mollis vitae metus. Aliquam sodales adipiscing tortor, sed venenatis velit ullamcorper non. Morbi accumsan posuere quam non dictum. Cras libero leo, adipiscing non convallis vitae, eleifend ut odio. Praesent convallis lectus sollicitudin risus dapibus laoreet.</p>
    </div>
</div>

CSS：

.full-width {
    background-color: #333;
}

.width-960 {
    background: #dcdcdc;
    width: 920px;
    padding: 20px;
    margin: 0 auto;
}
于 2013-02-07T15:51:44.593 回答