ホームページ >ウェブフロントエンド >htmlチュートリアル >背景画像を使って美しいボタンを作る方法_html/css_WEB-ITnose
背景画像を使って美しいボタンを作る方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:36:231748ブラウズ
背景画像を使用して美しいボタンを作成する方法:
推奨: できるだけコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。
ボタンアプリケーションはウェブサイトのどこにでもあると言えますが、デフォルトのボタンは美しくありません。ボタンの背景に写真を使用すると、ボタンの美しさが大幅に向上します。ここでは、背景画像を使用してボタンを美しくする方法について簡単に紹介します。ボタン上にマウスを置いたりボタンから離したりすると、背景画像が切り替わります。
コード例は以下の通りです:
<!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> 上記のコードは背景画像美化ボタンを実装しており、ボタン上にマウスを置いたときとボタンからマウスを離したときに背景画像を切り替えることができます。ただし、ここでは画像に背景画像を配置する手法が使用されています。まだよく知らない場合は、関連するリンクをクリックして詳細を確認してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。