IE8以下でもrgbaを使って、マウスオーバー時に文字(子要素)はそのままで背景のみを透明にする

先日こちら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))に変換するのですが、

▼こちらに便利な変換ツールがあります。
http://www.peko-step.com/tool/tfcolor.html
色をビジュアルで確認しながら調整も可能な16進数→10進数(逆もOK)変換ツールです。

背景色(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);

DXImageTransform.Microsoft.gradient() のカッコ内、
「startColorstr」「endColorstr」に色と透明度を指定していきます。

本来はグラデーションを表示するためのプロパティですが、
グラデーションの開始と終了を同じ値で単一色にして透明度を指定します。


*透明度の記述解説

下記表を参考に透明度を設定します。
ex 10%なら「#」の後に「1A」を入力

透明度0%10%20%30%40%50%60%70%80%90%100%
001A334D668099B3CCE6FF


では、マウスオーバーで透明度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>

css

#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);
}

・下から3行目の「background:none;」で通常設定の「background:#eef3f5;」を打ち消してから「filter」を設定します。


・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;
}

「:not(:target)」と「\9」でIE9,10のみ反映されますが、「filter」に対応しているIE9向け記述になります。


ちなみに、以前は↓このように記載しておりましたが「-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/