CSS と HTML を使用して画像に選択可能なチェックボックスをオーバーレイするにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS と HTML を使用して画像に選択可能なチェックボックスをオーバーレイするにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-27 22:55:14

オリジナル

367 人が閲覧しました

How Can I Overlay Selectable Checkboxes on Images Using CSS and HTML?

選択可能なチェックボックスを画像にオーバーレイする

画像を選択するためのチェックボックスを表示するには、次の方法を利用します:

CSS ベースのオーバーレイ

指定された固定値画像のサイズを変更するには、チェックボックスの下部と右側のプロパティをゼロに設定して、チェックボックスを絶対に配置します。

HTML コード:

<div class="container">
    <img src="image1.jpg"> 
    <input type="checkbox" class="checkbox">

ログイン後にコピー

CSS スタイル:

.container { position: relative; width: 100px; height: 100px; float: left; margin-left: 10px; }
.checkbox { position: absolute; bottom: 0px; right: 0px; }

ログイン後にコピー

イベント処理

選択/選択解除イベントの各チェックボックスにクリックハンドラーをアタッチします。画像クリックイベントは個別に処理できます。

以上がCSS と HTML を使用して画像に選択可能なチェックボックスをオーバーレイするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。