広告

posted by fanblog

rgbaで簡単にcssのみの半透明の背景が実装できた

このエントリーをはてなブックマークに追加
先日、半透明の背景をcssのみで実現するって記事を書きました。ですけど、もうちょっと簡単に背景を透明に出来そうです、はいw

css3のrgba指定


css3では、色をrgbaで指定できるんです。なので、こいつを使えば透明とか簡単らしいッス。

rgbaで、背景色に透過な色を設定するだけです。多くのブラウザでは対応していますし、ブラウザ毎に変なコードを書く必要がなくて、楽ですな。
ただし、rgbaはie8以下では適用できなかったり、色々注意点もある様なので、少しまとめてみます。

rgbaの基本情報


基本的な事は、リファレンスで見れます。
rgba()−CSS3リファレンス

問題は、対応していないブラウザ、特にie7,8をどうするか、って事です。6はもう良いですw

やっぱりopacityとかpngとか使う


1つは単純に、他の方法を使うって解決法があります。
Web-半透明について - Team Kiro
を見ると分かりますが、Opacityを用いたり、透過PNG画像を用いたりする事で一応対応出来ます。
これはつまり、半透明の背景をcssのみで実現するで紹介した方法とかを使ってみるしかないのかな、と。

透過PNGの方法の方が楽な気はしますけどね。バグの可能性とか少ないですし。

ie7,8で半透明は諦める


もし駄目だったり、微妙だと思うなら、普通にie7,8の場合には透明じゃない背景色を適用させる、ってのが無難な様です。まあ、無難ですねw
Lesson 09 表現の幅が広がるRGBaプロパティ・バリュー - Webデザイン表現&技法の新・スタンダード・CSS3&HTML5編 - MdN Design Interactive

rgbaだけでなく、rgbのコードも書いておく。これで背景が無くて文字が読めない、って事は避けれます。十分な解決策だと思います。別に全てのブラウザで同じ様に見えなくても、ページが機能していれば問題ないですからね。

一応その時の注意点として、以下の記事を紹介しておきます。
背景色をrgbaとrgbで2重指定するときのIE地雷 ::ハブろぐ

rgbaは「background-color」ではなく、「background」で指定する必要がある様ですね。

「DirectX Filter」って何やねん


完全に俺の勉強不足なんですけど、「DirectX Filter」ってやつがあります。あるそうです。こいつを使えばie7,8でも背景だけに半透明を適用出来るらしいんですけど、こういうタイプのcssって良く分からないんですよね。。なんですかこれ。。w
rgba()とfilterで背景だけを透過させる。 | かえラボBlog

ちなみに、「DirectX Filter」ってのは、DirectX Filter とはを読んだ感じだと、基本的には動作しそうな気がするんですが、、どうなんでしょう。

前に、グラデーションかな? その時にも、似た様な、何か長い~Microsoft.~みたいな指定方法のやつを見かけて、使ってみたら全然動作せず、分からないままで強まで来ちゃってるんですけど、、はい。。w

例えば、今回のやつは、次のやつだと思うんですけど。
filter:progid:DXImageTransform.Microsoft.Gradient()−スタイルシートリファレンス

ie9でも動くはずっぽいんですけど。。

と思ってもう一回やったら動いた~~!!www
background-color:#fff;
って書いたままだったから、背景が白のままだった、というオチw
DirectX Filter とはには、
2.DIVまたはSPANタグに使用する場合は position を absolute にするか、widthとheightを指定する必要がある。

って記述もありますが、ie9で確認したところ、widthやheightの指定はなくても適用されるっぽかったです。

という訳で、動作しそうですね。rgba()とfilterで背景だけを透過させる。 | かえラボBlogに書かれている様に、
#header{
// 白の半透明
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#99ffffff,EndColorStr=#99ffffff);
background-color: rgba(255, 255, 255, 0.5);
}

みたいに指定すれば、ちゃんとieで、rgbaが対応していないブラウザならfilterの方で半透明になり、他のブラウザならrgbaの方で半透明になり、ある程度はカバー出来そうですね。operaとかは無理っぽいですけどね。operaの為にbackground-colorとか指定したら、見事に半透明じゃなくなっちゃいますからね、さっきの俺みたいに。。

まあとりあえず、「DirectX Filter」ってのを使うって方法も1つです。

最後に


やっぱieに対応するってのは大変みたいですねw
実際問題、ie7,8らへんは透明にしない、ie7,8で半透明は諦めるで説明した方法が一番良いんじゃないかな、って個人的には思いますね。
全部で同じ様に見える様に作る必要はないよな~とつくづく思います。

まあでも、簡単な方法が見つかったので、半透明の背景ってのを使ったテンプレートとか、このブログのデザインとか考えてみたいなって思います。

ちなみに、このrgbaは背景だけでなく、ボーダー、文字色にも適用できるので、色々使えそうですね。

このブログの更新情報は TwitterRSS でチェック出来ます。是非、フォロー、またはRSSの購読をよろしくお願いします。
「RSSの購読って何?」って人は、 ブラウザ毎のRSS購読方法の簡単なまとめ を読んでみて下さい。

このエントリーをはてなブックマークに追加
人気記事

PAGE TOP

×

この広告は30日以上新しい記事の更新がないブログに表示されております。