CSS・CSS3 2014-06-22

CSSで背景色だけを透過させる (background:rgba)

css-rgba

今回は、CSSを使って背景色だけを透過させて見たいと思います。

よく使われているCSSプロパティは、【opacity】なのですが、このプロパティを使うと要素全てにスタイルがかかってしまいますので、文字までもが透過してしまします。
例えば、画像に重ねて要素を配置したとして、背景色を透過させたい場合に【opacity】を使ってしまうと、文字まで透過します。
マウスホバー時のアクションに【opacity】を使うのは問題無いと思うのですが、上記のような場合は、【rgba】で背景色だけを透過させた方がいいですよね。

コード

使い方は下記参照して下さい。(色【白】透過度【50%】に設定しています。)

.rgba{
        /*カラーは、RGBで指定します。最後に透明度を指定します。*/
	background:rgba(0, 0, 0, 0.5);
     }

RGBAとは、アルファチャンネルを有するRGBの拡張版らしいです。
RGBA(赤、緑、青、アルファ)という風に値を指定します。
通常は、16進数などでカラーの値をしてしますが、RGBAでは、RGBの値で指定します。
アルファの値には、透過度を指定しています。
デモサイトにて【opacity】と【background:rgba】を使って要素をスタイルさせていますのでそちらもご確認下さい。

デモサイト

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS jetpack

WordPressの投稿記事をTwitter・Facebookに自動投稿 WPプラグイン[Jetpack]

NEXT scroll-side

初心者も簡単に設置 jQuery サイドバーを固定してスクロールに合わせて追尾