將背景圖像應用於圖像元素

我在將一些背景圖像應用於圖像元素時遇到了一些麻煩。有誰知道這是甚至可能嗎？將背景圖像應用於圖像元素

我想要做的就是讓這個畫廊的下一個和上一個按鈕根據圖像的大小改變位置，所以我打算在上一個和下一個按鈕中設置一個應用於圖像正在顯示。

這裏的畫廊，這是：http://reveriesrefined.com/myftp/stack_1/

2013-04-05 EmmaGamma

圖像元素將調整自身以適應圖像的大小。即使它是有效的CSS來將背景圖像應用於img元素，它總是會被掩蓋。更何況你不能點擊背景圖片。

更好的解決方案是將按鈕編寫爲HTML。您可以使用CSS將按鈕移動到最左側和最右側，或者如果您想將它們按照頂部和底部進行真實定位。

<style> 
    .image_cont { position: relative; display: inline-block } 
    /* left and right styling */ 
    .image_next_btn { position: absolute; left: 0; top: 50%; margin-top: -10px; } 
    .image_prev_btn { position: absolute; right: 0; top: 50%; margin-top: -10px; } 
    /* or top and bottom styling */ 
    .image_next_btn { position: absolute; left: 50%; top: 0; margin-left: -10px; } 
    .image_prev_btn { position: absolute; left: 50%; bottom: 0; margin-left: -10px; } 
</style> 

<div class="image_cont"> 
    <img src="images/Ania_02.jpg"> 
    <div class="image_prev_btn">prev</div> 
    <div class="image_next_btn">next</div> 
</div>

來源

2013-04-05 03:49:12 kipple

問題是，我克隆了圖像並將其附加到#big div以使對中變得容易＃大有文本對齊：中心;另外，我已經嘗試在#big中添加另一個div，並將該圖像附加到該div上，但它開始給我帶來奇怪的問題，儘管這是正確的解決方案，但我仍然抱有希望，我只是認爲我做錯了。我試圖完成的主要事情是，我希望下一個，上一個和關閉按鈕相對於圖像區域定位（這樣它們會根據顯示的圖像自動更改位置）。 – EmmaGamma 2013-04-05 04:09:52

如果圖片沒有顯示，alt文本會顯示（至少在Firefox中，IE也帶有圖片的邊框和符號），背景圖片可能會顯示（alt文本將會用顏色和背景顏色着色，當然）。此外，如果圖像具有透明度... – FelipeAls 2013-04-05 04:41:27

我已經在您的網站上面測試過上面的代碼。嘗試用image_cont元素替換其中一個圖像，您會看到它完成了您提到的相對定位。一些常規技巧：閱讀關於相對和絕對CSS定位並檢查firefox的firebug（它使測試這些東西更快） – kipple 2013-04-05 10:57:32

將背景圖像應用於圖像元素

回答

相關問題