語法幫助 - 背景圖片精靈的CSS

我知道我接近，但有人幫我出：語法幫助 - 背景圖片精靈的CSS

body { 
background-attachment: fixed; 
background: url("images/background.jpg"), url("images/background.jpg"); 
background-repeat: no-repeat; 
line-height: 1; 
min-width: 1150px; 
background-position: top left, bottom right; 
}

的圖像被用作一個精靈，「background.jpg」是1720px寬1100px高。我需要在第一個實例中顯示圖像的右上部分，在第二個實例中顯示圖像的左下部分。在每種情況下，需要從jpg中獲取的矩形的大小是600px寬和400px高。

來源

2012-04-28 Doug Fir

這看起來像一個可疑的http://stackoverflow.com/questions/10364643/css-two-background-images-using-a-sprite轉發與圖像文件名稱換出了別的完全不同的背景位置。 – BoltClock 2012-04-28 15:43:48

雖然這與這篇文章有關，但它是關於選擇圖像的所需座標所需的特定語法的一個新問題 – 2012-04-28 15:45:39

這可能有助於

body { 
    background-attachment: fixed; 
    background: url("images/background.jpg") 100% 0px no-repeat, url("images/background.jpg") 0% 600px no-repeat; 
    line-height: 1; 
    min-width: 1150px; 
    }

發揮一下與圖像後的值。 100％和0％指的是x軸（這些也可以是px），而0px 600px指的是y軸。沒有一個活頁面來玩這個，就像我可以告訴你的一樣。

來源

2012-04-28 16:21:03 frontendzzzguy

好吧我正在陷入困惑。 url之後的座標是否與要選擇的圖像的哪一部分相關或放置在圖像的選定部分的哪個位置？我在如何爲圖像的每個部分放置左上角和右下角以及在何處選擇圖像之間混淆不清。爲了簡單起見，我說每邊都有一個1000px的正方形，我希望從精靈的左下角選擇一個大小爲100px的正方形，並將其放置在瀏覽器的右上角。怎麼樣？希望我有道理！ – 2012-04-28 16:44:57

要做到這一點，你會有以下背景：url（「images/background.jpg」）900px -900px不重複。座標與圖像的位置有關。所以這是從左邊900px和從頂部-900px。那有意義嗎？ – frontendzzzguy 2012-04-28 16:58:57

此外，座標是相對於父容器。 – frontendzzzguy 2012-04-28 17:04:30

語法幫助 - 背景圖片精靈的CSS

回答

相關問題