背景画像を使用して美しいボタンを作成する方法:
推奨: できるだけコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
ボタンアプリケーションはウェブサイトのどこにでもあると言えますが、デフォルトのボタンは美しくありません。ボタンの背景に写真を使用すると、ボタンの美しさが大幅に向上します。ここでは、背景画像を使用してボタンを美しくする方法について簡単に紹介します。ボタン上にマウスを置いたりボタンから離したりすると、背景画像が切り替わります。
コード例は以下の通りです:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">.bt{ width:67px; height:23px; line-height:23px; background:url(mytest/demo/bt.jpg) no-repeat -4px -4px; border:0px;}.over{ width:67px; height:23px; line-height:23px; background:url(mytest/demo/bt.jpg) no-repeat -4px -30px; border:0px;}</style></head><body><input type="submit" value="登录" onMouseOver="this.className='over'" onMouseOut="this.className='bt'" class="bt"></body></html>上記のコードは背景画像美化ボタンを実装しており、ボタン上にマウスを置いたときとボタンからマウスを離したときに背景画像を切り替えることができます。ただし、ここでは画像に背景画像を配置する手法が使用されています。まだよく知らない場合は、関連するリンクをクリックして詳細を確認してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
