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

Question

將某些背景圖像應用於圖像元素時遇到麻煩。 有誰知道這是否有可能？

我想要做的是擁有一個圖庫，其中下一個和上一個按鈕會根據圖像的大小更改位置，因此我計划只在要應用於所顯示圖像的類中設置下一個和上一個按鈕。

這是為此的畫廊： http : //reveriesrefined.com/myftp/stack_1/

Answer 1

圖像元素將調整其自身大小以適合圖像的大小。 即使將背景圖像應用於img元素是有效的CSS，也始終會被掩蓋。 更不用說您不能單擊背景圖像。

更好的解決方案是將按鈕編寫為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>