CSS兩個背景圖像使用精靈

我是新來的精靈，這個特殊的任務是讓我驚歎 - 請幫助別人。CSS兩個背景圖像使用精靈

我目前使用兩個背景圖像像這樣：

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

爲了提高頁面加載時間我現在想用一個形象，一個精靈。我認爲這是獨一無二的，因爲我希望在背景上使用相同的圖像兩次，其中我在瀏覽器窗口的右上角顯示圖像的一部分，並在左下角顯示圖像的一部分。我想要展示的圖像的兩個部分都是600px寬×400px高。

如果新圖片寬1700px，高1100px並稱爲「background.jpg」，我將如何調整代碼以實現此目的？

來源

2012-04-28 Doug Fir

Duplicate post： - http://www.stackoverflow.com/questions/7653240/multiple-background-images-using-css3-and-sprites – rgvcorley 2012-04-28 14:59:50

你發現我的下面的答案有用嗎？沒有反應？ – Katti 2012-05-24 21:50:00

你可以，取而代之，創建內：
不是因爲只有簡單的CSS，但它可以讓你使用你的精靈。

的HTML：

<body> 
    <div id="bgOne"></div> 
    <div id="bgTwo"></div> 
</body>

的CSS：

body { 
    min-width: 1150px; 
} 

#bgOne, #bgTwo { 
    position: fixed; 
    height: 400px; 
    width: 600px; 
} 

#bgOne { 
    background: url('images/bktopright.png') no-repeat right top; 
    right: 0; 
    top: 0; 
} 

#bgTwo { 
    background: url('images/bkbottomleft.png') no-repeat left bottom; 
    left: 0; 
    bottom: 0; 
}

來源

2012-05-23 22:26:44

下面是從一個工作示例答案給你。

http://jsfiddle.net/ctLZY/

<div class="bg" id="bg1"></div> 
<div class="bg" id="bg2"></div>

CSS

.bg{ 
    background-image: url("someimage.png"); 
    background-repeat: no-repeat; 
    position:fixed; 
    width:100px; 
    height:100px; 
} 
#bg1{ 
    background-position: -50px 0px; 
    right:0px; top:0px; 
} 
#bg2{ 
    background-position: 50px 0px; 
    left:0px; bottom:0px; 
}

您可以參考獲取更多信息下面的鏈接。
Css3.info
Css-Tricks
這是我碰到的方法。可能有更好的方法來處理這個問題。

來源

2012-05-24 16:24:14 Katti

CSS兩個背景圖像使用精靈

回答

相關問題