HTML에서 JS를 사용하지 않고 이미지를 드래그하거나 선택할 수 없도록 하는 방법-HTML 튜토리얼-php.cn

예

집

웹 프론트엔드

HTML 튜토리얼

HTML에서 JS를 사용하지 않고 이미지를 드래그하거나 선택할 수 없도록 하는 방법

Sep 03, 2023 am 08:09 AM

HTML 이미지 js 블록 드래그 가능/선택 가능

HTML에서 JS를 사용하지 않고 이미지를 드래그하거나 선택할 수 없도록 하는 방법

이미지 속성에 다음 코드 조각을 추가하고 이미지가 드래그되어 선택되는 것을 방지하세요.

img {  
   user-drag: none;  
   user-select: none;
   -moz-user-select: none;
   -webkit-user-drag: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

로그인 후 복사

텍스트나 이미지를 더블클릭하면 하이라이트(선택)됩니다. 이를 방지하기 위해 사용자 선택 속성을 사용할 수 있습니다. 이 속성을 없음으로 설정하면 이미지가 선택(강조 표시)되는 것을 방지할 수 있습니다.

예

다음 코드를 실행하여 이미지가 선택되지 않도록 할 수 있습니다. -

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            -drag: none;
            user-select: none;
            -moz-user-select: none;
            -webkit-user-drag: none;
            -webkit-user-select: none;
            -ms-user-select: none;
         }
      </style>
   </head>
   <body>
      <img src = "https://www.tutorialspoint.com/images/python3.png" alt = "Python" width = "62" height = "62">
   </body>
</html>

로그인 후 복사

위 내용은 HTML에서 JS를 사용하지 않고 이미지를 드래그하거나 선택할 수 없도록 하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.