Применение фоновых изображений к элементу изображения

Question

У меня возникли проблемы с применением некоторых фоновых изображений к элементу изображения. Кто-нибудь знает, возможно ли это?

то, что я хочу сделать, это иметь эту галерею, где следующая и предыдущая кнопки меняют положение в зависимости от размера изображения, поэтому я планировал просто установить следующую и предыдущую кнопки в классе, который применяется к отображаемому изображению.

вот галерея, для которой это: http://reveriesrefined.com/myftp/stack_1/

Answer 1

Размер элемента изображения изменится в соответствии с размером изображения. Даже если это был правильный 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>