CSS 사용자 정의 커서에 외부 이미지 URL을 사용할 수 있습니까?

CSS 사용자 정의 커서에 외부 이미지 URL 사용

웹 디자인 세계에서는 사용자 정의가 핵심입니다. 테마와 색 구성표부터 글꼴과 커서에 이르기까지 창의성을 표현할 수 있는 무한한 가능성이 있습니다. CSS 사용자 정의 커서는 기본 커서를 선택한 이미지로 교체하여 사용자 경험을 향상시킬 수 있는 고유한 기회를 제공합니다.

개발자 사이에서 흔히 묻는 질문 중 하나는 CSS 사용자 정의 커서에 외부 이미지 URL을 사용할 수 있는지 여부입니다. 다음 예를 고려하십시오.

<div class="test">TEST</div>

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url('http://upload.wikimedia.org/wikipedia/commons/d/de/POL_apple.jpg');
}

이미지가 사용자 정의 커서에 허용되는 최대 크기를 초과하므로 이 코드는 작동하지 않습니다. Firefox와 같은 브라우저는 최적의 성능을 보장하기 위해 크기 제한을 적용합니다.

또한 사용자 정의 커서에 외부 이미지 URL을 사용하려면 대체 키워드로 auto 키워드를 포함해야 합니다. 이렇게 하면 이미지를 로드할 수 없는 경우 기본 커서가 나타납니다.

아래는 필요한 조정이 포함된 수정된 예입니다.

.test {
  background:gray;
  width:200px;
  height:200px;
  cursor:url(http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif), auto;
}

다음 지침에 따라 터치를 추가할 수 있습니다. 외부 이미지 URL을 활용하는 맞춤형 커서로 웹사이트를 개인화하세요.

위 내용은 CSS 사용자 정의 커서에 외부 이미지 URL을 사용할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!