jQuery背景圖像位置

我被困在如何將背景圖像移出它的容器。jQuery背景圖像位置

我有一個寬度爲960的容器，居中。然後我在容器中有一個橫幅，我需要橫幅後面另一圖層上的圖像，但留有餘量：-100像素，但使用CSS時不起作用，因爲背景圖像不能移出容器。我怎麼能用jQuery來做到這一點，或者是否有人知道在CSS中使用語義正確的解決方法？

在此先感謝。

編輯： http://i49.tinypic.com/s5wzmp.png這基本上是我需要它看起來，紅色是背景圖像，需要從橫幅區域後面「峯」，這兩者都在960像素容器內。

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

來源

2013-02-07 Karl

我們需要查看代碼。 –

沒有什麼可看的，我只是亂七八糟的色塊atm試圖讓它工作.. – Karl

Ohhhhhh .....我想我終於明白你想要什麼了....位置你的形象（無論是紅色塊）作爲'絕對'與左'：-100像素'確保它的父母，包裝，被定位爲至少'相對' – Leeish

我已經成功地做到這一點！

<!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-07 16:02:40 Karl

爲什麼不只是刪除背景圖片，以便您可以通過元素看到背後的內容。如果你是通過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-07 15:37:06 Leeish

對於較大的顯示器，背景圖像需要位於960像素容器之外。所以它不會出現在視圖之外 – Karl

沒錯，但是如果你移動它的理由是爲了隱藏它，只需將background-image屬性設置爲none而不是改變它的位置。 – Leeish

你在哪裏得到我想隱藏的東西的印象？ – Karl

這裏，你可以做你想要做的一種方法：

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-07 15:51:44

什麼？這與我的問題有甚麼關係？ – Karl

我發佈的代碼將允許您在延伸超過960寬度的960元素後面擁有背景。道歉，如果它不幫助或我誤解了你的問題。只是試圖幫助:) –

我想你誤解了我的問題，我解決了它，但謝謝你的嘗試。 – Karl

jQuery背景圖像位置

回答

相關問題