CSS を使用してボタンの画像を動的に変更するにはどうすればよいですか?

CSS を使用してボタン画像を動的に変更する

画像を関連付けて入力ボタンを作成する場合、従来の方法では「type=」を利用します。 「画像」属性。ただし、CSS では、このようなボタンに対する制御が制限されています。この障害を克服するために、より汎用性の高い「type='submit'」属性を使用して画像でボタンのスタイルを設定する簡単な手法を検討してみましょう。

「type='image'」を使用する代わりに、「type」に切り替えることを検討してください。 ='submit'" をボタンに設定します。この調整により、CSS を通じてカスタム背景画像を指定できるようになります。以下に例を示します。

<input type="submit">

次に、スタイル シートで CSS クラス「myButton」を定義します。

.myButton {
    background: url(/images/Btn.PNG) no-repeat;
    cursor: pointer;
    width: 200px;
    height: 100px;
    border: none;
}

このコードは、指定された画像を背景としてボタンをレンダリングします。ユーザー エクスペリエンスをさらに向上させるために、「:hover」疑似クラスを使用してホバー効果を追加できます。

.myButton:hover {
    background: url(/images/Btn_Hover.PNG) no-repeat;
}

ここで説明した方法でのボタンのスタイル設定は、次のような特定のブラウザではサポートされない場合があることに注意してください。サファリ。このような場合、ブラウザ間の互換性を確保するために、画像の配置や onclick イベント ハンドラーの実装などの代替ソリューションをお勧めします。

以上がCSS を使用してボタンの画像を動的に変更するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。