文字を透過せず背景色だけ透過する
このテキストが載っている背景色の白は透明度75%で透過しています。
透過に関しては、以下の様な記述を良くつかっているのですが、この方法だと、安定はしているものの要素に内包される全てが透過される為、テキストや画像も同じ透明度で透過されてしまいます。
filter: alpha(opacity=75); -moz-opacity:0.75; opacity:0.75;
そこで今回は、背景のみに透過の指示をしてテキストや画像は透過させないというのを探してみました。
で、使った記述がこれ。
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#bfffffff,EndColorStr=#bfffffff); background-color: rgba(255, 255, 255, 0.75);
「background-color: rgba〜」に対応しているブラウザは背景色を0〜255のRGB指定で透明度を0〜1（0が0%で1が100%）で指示します。
で、それ以外は「filter〜」で指示をするのですが、これがちょっと謎でした。
どうやら透過を使って背景をグラデーション化する為のフィルタをグラデーションの度合いを開始=終了にして単純に透明に利用しているようです。
具体的に指示するのは、「StartColorStr=#BFffffff」と「EndColorStr=#BFffffff)」の二つ。
「#〜」が透明度とカラーの指定で、最初の2桁が透明度、後の6桁がカラーです。
カラーはウェブでも良く使うパターンなので説明は省きます。
透明度が一瞬戸惑うんですが、0〜100%の透明度を0〜255にして、それを16進数で表現しています。
75%を指定する場合は、255x75%=191→BFって具合です。ちなみに「GradientType=0」はグラデーションの方向を指示する値で、0が縦、1が横とのこと、値を変えて遊んでみるのも楽しそうですね。
今回の参考リンクはこちら→rgba()とfilterで背景だけを透過させる