0

半透明ボタンにしたいとき、背景の柄が透けてしまうのを防ぐ方法

半透明ボタンにしたいとき、背景の柄が透けてしまうのを防ぐ方法

 

ボタン要素をimg画像で配置した時に、マウスオーバー効果として半透明にする指定をすると、背景が黒っぽい場合に柄が透けてしまって少しカッコ悪くなってしまうのを防ぐ方法になります。

簡単に言ってしまえば、画像の裏側に背景白を指定するだけで解決してしまいます。

 

▼ボタン画像を用意しました。

button1

実際に、デモを見て確認してみてください。

 

 

背景が白っぽい場合

HTML

CSS

 

背景が黒の場合

HTML

CSSは変更しないとデモの2番目のように背景が透けて柄が見えているかと思います。

 

背景が黒で、その上に白を乗せた場合

HTML

CSS

 

aタグ”に対して「background:#FFF」を指定し、「display:block」でブロック要素にします。横幅と高さもボタンのサイズに指定しておきましょう。

そうすることでデモの3番目のように、白い背景が透けるような透過の表現が実現できます。ちょっとしたことですが、つまづいた時に再確認してみてください。

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > 半透明ボタンにしたいとき、背景の柄が透けてしまうのを防ぐ方法