「粘貼」HTML到圖像

這是我的困境，我有一個背景圖像，它有一個酒吧。我用「粘貼」HTML到圖像

body { 
    background-image: url("foo"); 
    background-size: 100%; 
}

我也有一些HTML，我想成爲內這條適合的背景圖像。問題是，當用戶調整瀏覽器窗口大小時，圖像會根據它調整（這是我想要的），但是html保持在同一個位置，所以它會被放在酒吧外面。有沒有一種方法可以使我的html可調整大小像圖像，以便它看起來像html是粘在圖像上的？有人可以給我一個CSS剪輯嗎？

2012-07-28 Harrison

這個「酒吧」有多複雜，難道你不能創建一個div來模仿它嗎？ – 2012-07-28 20:48:22

製作它自己的div欄，並給它裏面的元素設置一個相對的高度/寬度，欄寬度爲100％，這樣當它調整大小時，圖片和內容就會改變大小。你可以用margin來做同樣的事情。 – Charlie 2012-07-28 20:50:17

請爲您的問題創建一個測試用例。 – 2012-07-28 20:53:43

這個問題說明了使用圖像指導佈局的最大問題。不幸的是，哈里森，你沒有解決方案，可以讓你在不改變圖像的情況下在瀏覽器或瀏覽器大小上做你想做的事情。如果可以的話，請發佈它應該是什麼樣子的屏幕截圖，以便我們可以幫助您修改背景以提高其兼容性。

同時，我建議您從圖像中刪除條形圖並繼續使用圖像作爲背景。然後使用display: block;的div並使用該欄作爲背景。

2012-07-28 20:58:30

...不是div的天生「塊」風格？ – Jared 2012-07-28 21:09:20

是的，但是因爲其他帖子之一表示他應該將寬度更改爲100％，所以我認爲我確認他已將div設置爲'display：block'，以防他重寫默認顯示樣式 – 2012-07-28 21:26:09

如果您希望條的大小可調整，請將其高度和寬度設置爲容器高度和寬度的百分比數量。當然，當窗口大小減小時，HTML會溢出，沒有補救辦法。

2012-07-28 21:21:10 SexyBeast

Is那麼我可以用不同的方式做到這一點？ – Harrison 2012-07-28 21:23:00

不是。也許有方法可以通過Javascript來檢測瀏覽器的大小調整，通過這種方式，您可以同時調整字體大小，以便內容不會溢出，但這會打破優雅的退化，因爲禁用Javascript的用戶無法獲得優勢。再加上它會很複雜，不知道它是否值得。 – SexyBeast 2012-07-28 21:26:10

如何在不使用瀏覽器大小百分比的情況下縮小背景？ – Harrison 2012-07-28 21:44:14

回答