将背景图像应用于图像元素

Question

我在将一些背景图像应用到图像元素时遇到了一些麻烦。有谁知道这是否可能？

我想要做的是拥有这个画廊，其中下一个和上一个按钮根据图像的大小改变位置，所以我计划只在应用于图像的类中设置下一个和上一个按钮正在显示。

这是画廊：http://reveriesrefined.com/myftp/stack_1/

Answer 1

图像元素会自行调整大小以适应图像的大小。即使将 background-image 应用于 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>