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>

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

1 个答案: