0

背景画像をコンテナから移動する方法に行き詰まっています。

中央に幅 960 のコンテナがあります。次に、コンテナー内にバナーがあり、バナーの背後にある別のレイヤーに画像が必要ですが、margin-left: -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

Here's one way that you can do what you're trying to do:

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

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

The CSS:

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

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