設置圖像作爲背景

嗨，夥計我使用這個類來把一個響應圖像作爲一個div的背景，它運作良好，它是響應。我唯一的問題是圖像沒有完全顯示，我的意思是它是一個大圖像，它是居中的，一切都是正確的，除了我看不到圖像的頂部和底部，我可以添加什麼充分看到這張大圖，並保持響應行爲？設置圖像作爲背景

.bg { 
    background-image:url("image local url"); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
}

來源

2016-12-12 sisimh

嘗試'background-size：contains' –

這一切都取決於您的HTML和其他CSS。什麼是圖像和對象的維度？如何使用'.hg'以及該元素具有哪些其他類？ – Peter

@OskarLaska好吧與包含我可以看到只滾動下來的頂部，並且左側和右側不再填充div了 – sisimh

您必須將實際的img標籤放在正確的圖像上並用css隱藏它。事情是這樣的：

img { 
    width: 100%; 
    visibility: hidden; 
}

使用這種方法，實際IMG將調整容器到適當的內容，使其總適合的圖像，你會得到的背景圖像的質量。讓我知道這是否工作

來源

2016-12-12 13:05:31

那麼，爲什麼不直接使用圖像，如果你打算把它放在div中呢？爲什麼使用它，隱藏它，然後使它成爲背景？ – Pete

因此，您可以在不使用像z-index這樣的黑客的情況下正確添加圖像的頂部內容。此外，對於滑塊庫，這是一個非常好的解決方法，因爲客戶提供的圖像通常尺寸（維數）不正確，此解決方法與容器的最大高度和最小高度相結合，將使滑塊庫響應。這是一個小題目，但這是一個很好的知道'黑客'。 –

再次，爲什麼不只是使用圖像，因爲你將不得不將內容放置在不可見圖像的頂部，並且添加1個z-index（這不是黑客 - 你的不可見圖像是黑客）不是結束如果你知道如何正確使用z-index的話 – Pete

設置圖像作爲背景

回答

相關問題