2011-09-26 174 views
0

我試圖建立一個固定的邊界,與從這個精靈的瀏覽器窗口動態改變大小的網站(它不是完美的,我知道。):http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.pngCSS精靈位置問題

DEMO on jSFiddle

我您可以看到的問題是垂直牆壁部分。由於#falJ#falBheight:100%它們也包括底壁的末端以及兩個壁畫之間的空間。有沒有辦法強制backround-position只使用沒有底壁的端部的垂直壁部分?

在此先感謝。

+2

*簡短的回答:*不,這不是你想做的事情。您無法使用不符合潛在最大尺寸的精靈來提供流暢性。 *長答案:*如果沒有人能夠幫助你,我會在早上爲你寫一個解決方案。 – Ben

+0

@vonkly我很害怕這個。如果你向我展示一種方法來做到這一點,那將很酷。我可以等待你的解決方案然後:)謝謝:) –

+0

現在把它放在一起 - 我會編輯這個評論,當它完成。快速提問:元素的*寬度*是否固定,或者您是否也需要流體? – Ben

回答

0

解決方案http://jsfiddle.net/vonkly/Ld43B/

這不是世界上最漂亮的事情,但它達到你想要什麼。查看源代碼&直接鏈接的背景圖片,看看你需要做什麼。它目前設置在299px寬;我想你會使用更廣泛的東西。

我還建議在你的內容中添加一些填充(或者用p標記,span,另一個div等) - 它目前的設置方式不是我推薦的可讀性。

編輯

我可以想像實現流體寬+高盒子,你在你所希望的方式有邊界的唯一方法是使用第二圖像的西部和含東的div 。這應該適用於你目前的方法。

+0

對不起,但這不是我想要實現的。我們誤解了對方。 :)關鍵是我希望它適合任何屏幕尺寸,即使我在飛行中重新調整窗口大小。在這個頂部和底部將總是固定的大小。 –

+0

你告訴我*「只有高度隨窗戶高度變化而變化」; *這不正確地描述你的目標。爲了達到你想要的效果,使用你以前的方法,並簡單地使用西牆和東牆的不同圖像。 *無法以您想要的方式*重複圖片的特定部分(精靈)。 – Ben

+0

是的,我看到我的英語在哪裏引導你錯誤的方式。我沒有在其他地方找到其他解決方案,所以我按照你剛纔所說的去做。 :) 感謝您的時間。如果你在回答中寫下這個評論,我會接受它:) –