背景を半透明すりガラス風に。design背景を半透明すりガラス風に。pakutaso”opacityとrgbaを使って半透明にする方法の紹介です。情報通Kさんは顔出しNG!早く処理せねば”今回はCSSを使った半透明処理の紹介です。半透明にするには「opacity」と「rgba」がありますが、それぞれ利用シーンが異なりますのでサンプルを交えながら使い方をまとめておきます。hoverしたら画像を半透明サムネイルなどでよくみるパターンです。画像の上にマウスカーソルが来たら画像が半透明になるタイプです。この場合は「opacity」を使います。画像にマウスを乗っけてみてください。0.5;}要素全体を半透明にする場合に使えばOKです。数値は0.0から1.0を指定できます。数値が小さくなるほど透明になります。背景だけを半透明、すりガラス風に同じ半透明でも属性(背景など)だけに半透明を適用したい場合は「rgba」を使います。rgba(255,255,255,0.8);}背景(background)として画像を使いその上に白の要素(sample-image-jyohou2-hover)を被せています。rgbaは属性ごとに半透明を指定できるのでテキスト「業界に詳しい情報通Kさん」は半透明になることなく読みやすいまま背景だけが半透明になっています。同じHTMLでsample-image-jyohou2-hoverにopacityを当てるとこんな感じになります。0.5;}opacityはセレクタ全体に適用されるため文字まで一緒に半透明になっています。opacityとrgbaの違いがお分かりいただけたでしょうか。rgbaの色指定RGBAは色R(red)G(green)B(blue)にA(alpha:透明度)が加わったものですが、色の指定は16進数(FFとか)で指定せず、10進数で指定する必要があります。上のサンプルでいうとrgba(255,255,255,0.8)の255の部分です。これはFF=255ですので#FFFFFF(白)のalpha:0.8という意味になります。16進数から10進数への変換は計算や対応している電卓で導き出すことが出来るのですが、早見表を公開してくださっている方がおられましたので紹介しておきます。画像を加工することなくCSSだけで色々できるのでイメージ膨らみますね。情報通Kさんだけでなくブログデザインなどにも取り入れてみてください。この記事いかがでしたか?ツイート背景を半透明すりガラス風に。背景を半透明すりガラス風に。生活でしたが見ているだけよりも踊らにゃソンソンの精神でWebの輪に参加すべくBLOG開設。背景を半透明すりガラス風に。reserved.ごすてっぷ:WordPress、Webサービスなどの情報を5ステップくらいで紹介しています。