html - 画像要素への背景画像の適用

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>