<body>以外的背景圖像？

我試圖定位一個背景圖像，以便它與現有的漸變背景對齊，該漸變背景相對定位到<html>元素（即漸變圖像出現在瀏覽器寬度的92％處，不管您如何調整大小窗口）。<body>以外的背景圖像？

我通過將圖像放置在<div>中，將圖像相對於<div>定位，並將<div>相對於瀏覽器窗口定位。

例如。

<body> 
    <div id="background-position-container"> 
    <img src="images/bubbles.png" id="background-corner-decoration" /> 
    </div> 
</body>

有：

<style> 
#background-position-container { 
    position: absolute; 
    width: 0px; 
    height: 0px; 
    top: 180px; 
    left: 92%; 
} 

#background-corner-decoration { 
    position: relative; 
    /* tweak the position of the image so it lines up with the gradient */ 
    top: -176px; 
    left: -118px; 
    width: 216px; 
    height: 477px; 
    margin: 0px -118px -176px 0px; 
} 
</style>

這似乎很好地工作，但如果你水平縮小瀏覽器窗口，背景圖像會導致<body>元素增長超過<html>元素和滾動條出現。

我似乎能夠通過創建<body>一個新的同級元素，並把裏面的<div>解決這個問題：

<div id="background-page-container"> 
    <div id="background-position-container"> 
    <img src="images/bubbles.png" id="background-corner-decoration" /> 
    </div> 
</div> 
<body> 
</body>

，並補充說：

#background-page-container { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
}

這至少在Firefox ，但這看起來並不是一個好的做法，我確信所有的瀏覽器都不能正確呈現。有沒有更好的方法來實現我想要的，同時將所有顯示元素都留在<body>之內（也就是說，將背景圖像剪切在<body>的邊緣而不是增長）？

感謝您的幫助，
gs。

編輯：按照要求，這裏有jsfiddles來說明這個問題：

這裏是它看起來像Hiigaran的解決方案：http://jsfiddle.net/kn36A/
這裏是對齊正確的解決方案，但會導致難看的滾動條時，窗口的尺寸重新調整：http://jsfiddle.net/w446Q/
這裏是「最好」的解決方案，我到目前爲止，但它似乎違反HTML最佳實踐（？）：http://jsfiddle.net/H2PLr/

我已經用＃3測試過的每個瀏覽器似乎都能夠正確渲染它 - 這種解決方案真的和我認爲的一樣糟糕嗎？

再次感謝！
gs。

來源

2014-04-01 Guy Smiley

在其他答案的評論中，Hiigaran通過簡單地從解決方案＃3開始，並在<主體>下移動外部包含div（稱爲「background-page-container」）來解決該問題。所以沒有必要像我以前想象的那樣在<主體>之外出現元素。

gs。

來源

2014-04-04 13:08:11

假設我正確讀取...

您可以用逗號分隔結合背景CSS。因此，舉例來說，如果你想有一個圖像和漸變作爲背景一樣的東西，嘗試：

background-image: url('image.png'), linear-gradient(#bb0000, #0000bb);

然後，您可以以同樣的方式添加像background-position其他背景的CSS屬性：

background-position:50px 50px, 0;

值的順序很重要。第一組值（50px 50px）適用於圖像，但不適用於漸變。第二個background-position值（0）適用於第二個background-image值，即爲梯度。

在你的HTML中使用它，你應該能夠以絕對值或相對值定位你的圖像。

編輯：此外，如果您添加任何額外的背景屬性沒有逗號，那麼您提供的值將適用於所有背景。例如，background-repeat:no-repeat將不會重複圖像或漸變，但background-repeat:no-repeat,repeat將以與位置值相同的方式應用於每個圖像或漸變。

來源

2014-04-01 22:24:47 Hiigaran

嗨，謝謝你的回答。這種情況下的問題是，漸變的位置相對於瀏覽器寬度的92％。如果我將圖像定位爲92％的背景，則不會與漸變正確對齊。即使我調整了圖像的位置，使其排列齊整，但您只需調整瀏覽器窗口的大小，圖像就不再與漸變線對齊。所以我需要一種方法來定位圖像，使其不會相對於漸變的位置移動。 –

你能鏈接你試過的代碼的JSFiddle嗎？ http://jsfiddle.net/ – Hiigaran

請參閱原文中的編輯。順便說一句，我錯了背景圖像相對於梯度移動，如果他們被設置爲相同的％位置，但是如果您嘗試通過將兩個元素放置在不同的％位置來排列它們（例如92％爲梯度但93.45 ％圖像）。 –

<body>以外的背景圖像？

回答

相關問題