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 기반 오버레이

제공 이미지 크기를 고정하려면 하단 및 오른쪽 속성을 0으로 설정하여 확인란의 위치를 절대적으로 지정하세요.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!