先日こちらでopacityを使ってマウスオーバー時に要素を半透明にする方法をご紹介しました。
こちらは、プロパティがopacityなので子要素である文字も含めて全体を半透明に設定されます。
今回は、文字は透明にせずに背景のみ半透明にする方法について説明します。
↓ちなみに、こんな事もできます。
↑マウスオーバー時に背景のみカラー(グレー #333)フィルターをかけたような感じ・やり方としては、opacityではなく背景色(background-color)をrgbaで設定して透明度を指定すればOKです。
rgbaとは
まずはrgbaについて。
r=red(赤)、g=green(緑)、b=blue(青)、a=alphachannel(アルファ)
アルファチャンネルが透明度を表します。
・#99ffcc→16進数(0〜f)
・rgba(153,255,204,0.6))→10進数(0〜255)+アルファ
ex
「rgba(153,255,204,0.6)」とするなら、
R(赤)が、153/255(60%)
G(緑)が、255/255(100%)
B(青)が、204/255(80%)
A(アルファ(透明度))が、0.6(60%)
と、言う意味です。
rgbaで設定する為に、
従来の16進数(#99ffcc)を10進数(rgba(153,255,204))に変換するのですが、
背景色(background-color)をrgbaで設定して半透明にする
具体的にソースを記載します。
html
<ul> <li class="glow"><a href="#">→ Text Link Button</a></li> <li class="glowColor"><a href="#">→ Text Link Button</a></li> </ul>
css(hoverで半透明なのでrgbaを設定する。デモの上の設定)
#contents li { background:#eef3f5; /* 通常の背景色 */ } #contents ul li.glow:hover { background: rgba(238,243,245,0.6); }
・hover時に通常の背景色と色味を変える場合は、「238,243,245」を好きな数値にする。(デモの下の設定)
ex
#contents ul li.glowColor:hover { background: rgba(199,237,255,0.6); }
IE8以下にもrgba対応させる
rgbaはIE9以上が対象ですが、IE独自のフィルター「filter」を使えば実装可能です。
*「filter」の記述解説
例えば、↓こちら透明度60%の#eef3f5(rgba(238,243,245,0.6))の設定です。
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99eef3f5,endColorstr=#99eef3f5);
「startColorstr」と「endColorstr」に色と透明度を指定していきます。
本来はグラデーションを表示するためのプロパティですが、
グラデーションの開始と終了を同じ値で単一色にして透明度を指定します。
*透明度の記述解説
下記表を参考に透明度を設定します。
ex 10%なら「#」の後に「1A」を入力
透明度 | 0% | 10% | 20% | 30% | 40% | 50% | 60% | 70% | 80% | 90% | 100% |
---|---|---|---|---|---|---|---|---|---|---|---|
値 | 00 | 1A | 33 | 4D | 66 | 80 | 99 | B3 | CC | E6 | FF |
では、マウスオーバーで透明度60%の#eef3f5(rgba(238,243,245,0.6))に設定します。
・htmlとcssの通常の設定は同じ。
rgbaを設定するhover時に「filter」を使います。
html
<ul> <li class="glow"><a href="#">→ Text Link Button</a></li> <li class="glowColor"><a href="#">→ Text Link Button</a></li> </ul>
#contents li { background:#eef3f5; /* 通常の背景色 */ } /* hoverで背景を透明にする為のcss */ #contents ul li.glow:hover { background:none; /* 背景色を一旦打ち消す */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99eef3f5,endColorstr=#99eef3f5); background: rgba(238,243,245,0.6); }
・hover時に背景の色味を変える(デモの下の設定)時は、
「filter」の「startColorstr」、「endColorstr」の数値と「rgba」の数値を変えればOK
ex
通常背景色 #eef3f5(rgba(238,243,245))
→hover時 #c7edff(rgba(199,237,255))
#contents li { background:#eef3f5; /* 通常の背景色 */ } /* hoverで背景を透明にする為のcss */ #contents ul li.glow:hover { background:none; /* 背景色を一旦打ち消す */ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99c7edff,endColorstr=#99c7edff); background: rgba(199,237,255,0.6); }
*IE9向け「filter」解除設定
最後に、IE9は「filter」もrgbaも効いてしまうので「filter」を解除します。
css ↓を追記する
#contents ul li.glow:hover:not(:target){ filter: none\9; }
ちなみに、以前は↓このように記載しておりましたが「-ms-filter」は必要無いようです。
(無くてもIE8表示されます)
#contents ul li.glow:hover { background:none; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99eef3f5,endColorstr=#99eef3f5); -ms-filter: "progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99eef3f5,endColorstr=#99eef3f5)"; /* IE8*/ background: rgba(238,243,245,0.6); /* IE9以上、他モダンブラウザ*/ } /* ↓IE9にfilter解除 */ #contents ul li.glow:hover:not(:target){ filter: none\9; -ms-filter: none\9; /* IE8*/ }
▼マウスオーバー(hover)で画像または要素を半透明にする
http://d.hatena.ne.jp/soratomo0714/20160216/
▼opacityを全ブラウザに対応させるcss
http://d.hatena.ne.jp/soratomo0714/20160214/