투명 오버레이 DIV에서 텍스트 선택을 방지하려면 어떻게 해야 합니까?

텍스트 오버레이를 위해 DIV를 선택 불가능하게 만들기

특정 시나리오에서는 워터마크와 같은 투명한 DIV 오버레이 텍스트가 실수로 선택 가능하게 되어 사용자 상호 작용을 방해할 수 있습니다. 이 문제는 DIV의 Z-색인이 더 낮은 경우에도 발생합니다. 브라우저는 해당 레이어가 아닌 표시되는 콘텐츠를 기준으로 선택의 우선순위를 정하기 때문입니다.

DIV를 선택 불가능하게 하려면 다음 두 가지 실행 가능한 접근 방식이 있습니다.

jQuery 사용:

jQuery를 사용하여 선택을 비활성화하려면 다음을 사용할 수 있습니다. 확장자:

$('.button').disableSelection();

CSS 사용:

또는 CSS를 사용하여 브라우저 간 동일한 결과를 얻을 수 있습니다:

.button {
    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

이 CSS 속성을 적용하면 지정된 DIV에 대한 사용자 선택을 효과적으로 비활성화하여 기본 텍스트가 그대로 유지되도록 할 수 있습니다. 선택할 수 없습니다.

위 내용은 투명 오버레이 DIV에서 텍스트 선택을 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!