Question

我被困在如何将背景图像从容器中移出。

我有一个宽度为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>

Answer 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>

Answer 2

为什么不删除背景图片，以便透过元素看到背后的内容。如果你是通过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; }

Answer 3

这是你可以做的事情的一种方式：

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;
}

jQuery背景图像位置

3 个答案: