［CSS覚書］画像を使わずCSS設定で背景だけを透過させる方法

2013年6月14日

今まではナチュラルに透過pngで設定してたのですが、今回はなんとなく画像を使わないでできないかなと思いたち・・・

結果的に下のかえラボさんのやり方を引用しました。
グラデーション設定をグラデーションさせない（GradientType=0）で透明機能だけを利用する方法です。

rgba()とfilterで背景だけを透過させる。 | かえラボBlog
記事中の設定は白50％を背景にする設定ですね。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
background-color: rgba(255, 255, 255, 0.5);

これを踏襲して

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#B6062b7b,EndColorStr=#B6062b7b);
background-color: rgba(6, 43, 123, 0.7);

という設定で、IE8、9、chrome、firefoxで同様な感じで濃い青の半透明になりました。
上のfilter: progid:DXImageTransform～がIE向けの設定で、rgbaはIE以外のブラウザ向けの設定ですね。

rgba()はCSS3じゃなくても使えます。

いくつかのところでCSS3のリファレンスとして載ってるので、rbga設定ははCSS3じゃないと使えないかと思ってたのですが、3じゃなくても大丈夫でした。
rgba()－CSS3リファレンス

尚、RGBA値をサポートしていないブラウザでは、透明度だけが無視されて単なるRGB値として扱われるのではなく、色指定そのものが認識されずに無効となるので注意してください。

rgba()と一緒に背景は設定できない

footerの設定をしてるときに、IEでは半透明になってるのに、chromeでは背景しか見えないという現象にあいました。
悲しいことに、rgba()を設定した項目と同じ項目にbackgroud-imageを設定すると、backgroud-imageが上にのっかってしまい、半透明部分が見えなくなるようです。なので画像が半透明でない限りは、背景画像は一緒に設定できません（ーー；ううう。
filter:設定は、背景が後ろに回るようなので、IEだとちゃんと見えるんですがね。
CSS3だとまた違ってくるかも知れません。

filter:項目でフォトショでいう70％の透明度はどうやってあらわすのか

上の設定で元色の#062b7bの頭に透明度を表す数値を付ければ、よいということはわかったのですが、フォトショで設定している透明度70％を16進数で表すにはどうしたらよいということに頭を悩ましました。
最終的に無理やり計算して、「B6」という数値を出しましたが、割り切れずに適当に出した部分があるので、厳密には多分違う・・・(–;
00を0％、FFを100％として、10％刻みの数値が知りたい・・・(–;

無理やり割って16進数対応表で照らしあわした数値（255/10=25.5≒26にしちゃった）

0% ⇔ 00
10% ⇔ 1A
20% ⇔ 34
30% ⇔ 4E
40% ⇔ 68
50% ⇔ 82
60% ⇔ 9C
70% ⇔ B6
80% ⇔ D0
90% ⇔ EA
100% ⇔ FF

ググっている時にARGB変換ツールというのも見つけたのですが、これも不透明度を指定しなきゃいけないので使えなかった。

filter:項目で記述を間違えたり、ありえない数値を入れると、なぜか青いグラデーションが表示

関連して#D0と入れなければいけないところを、まちがえて#DO（表にはない数値）としてしまったら、なぜか青いグラデーションが表示されました。

opacityだと子要素まで全て透過してしまうので、背景には使えない

失敗例ですが、最初は以下を引用したら見事に中の画像まで透明にorz

IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック – WEBデザイン　BLOG

ほとんどのブラウザで背景の半透明化を可能にするCSS指定 | fixture.jp

はまちちゃんもいってるようにopacityだと子要素まで全て透過してしまいます。

CSSで半透明、opacityとrgbaの違い – ぼくはまちちゃん！(Hatena)
←この記事見たことあったのだが、すっかり忘れてた。

敢えて背景だけでなく全てを透かしてみる（20130614追記）

その場合はこのページを参考に。
全てのブラウザに対応したcssスタイルシートの透明、半透明の背景設定を記述する | WordPressにGoogle Maps API V3！

例は85でかなりスケスケなんですが、95ぐらいにすれば、デザインによってはそこそこ使えそうかなと思います。
これだとスクロールバーは全透けで背景と同じ画像になりますよ！

    background: #fff;
     filter:alpha(opacity=95);
     -moz-opacity:0.95;
     -khtml-opacity: 0.95;
     opacity:0.95;
}

その他の参考記事

rgbaで簡単にcssのみの半透明の背景が実装できた – ファンブログハック
http://fanblogs.jp/oands/archive/284/0

この方も最終的にかえラボのやり方で落ち着いているんですが、
他にも色々参考リンクが載っています。
また自分の環境では確認してないoperaでは実装できなかったという記述があります。

CSS

Posted by ponnao