CSS カスタム カーソルに外部画像 URL を使用できますか?

CSS カスタム カーソルに外部画像 URL を使用する

Web デザインの世界では、カスタマイズが重要です。テーマや配色からフォントやカーソルに至るまで、創造性を表現する可能性は無限にあります。 CSS カスタム カーソルは、デフォルトのカーソルを選択した画像に置き換えることで、ユーザー エクスペリエンスを向上させるユニークな機会を提供します。

開発者の間でよくある質問の 1 つは、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 を利用するカスタム カーソルを使用して Web サイトをパーソナライズします。

以上がCSS カスタム カーソルに外部画像 URL を使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。