Webデザイン

重ねたオブジェクトをopacityを使わずrgba値で背景色だけを透過する方法【CSS初心者講座】

Web制作において、背景画像などに対して最前面のオブジェクトを透過させたい場合がありますよね。

その場合は、CSSのopacityプロパティを利用して透過させる事ができると思いますが、場合によっては使い物にならない時がありますので、そちらの対処法の紹介をしていきます。

「opacity」が使えない理由

CSSでの透過と言えば、opacityですよね。opacityを使えばいとも簡単に透過を実装する事ができます。

しかし、透過するものが一つだけ(例えば、背景色だけ)なら問題ないのですが、背景画像を含めた文字や枠線を上に乗せている場合などもあります。

その場合は、以下の例のように、文字ごと透過してしまいますので使い物になりません

<div style="background: url(https://designerbrg.com/blog/wp-content/uploads/2020/09/highquality_pictures_face_paint_children.jpg); width: 500px; height: 333px;"><p style="font-size: 3.0em; line-height: 3.0em; font-weight: bold; text-align: center;color: #fff; background: red; opacity: 0.3;">KIDS コーナー</p></div>

実装例

KIDS コーナー

 

そんな時に役立つのが、プロパティ「値」に利用できる「rgba」です。

「rgba」値を利用しよう

「rgba」とは、「通常のrgbカラー+a(アルファ)」という意味です。よくデザインの世界では、「α(アルファ)」を透明度の領域として表現する事がありますね。

rgbaの値は以下のように使用していきます。

background(-color): rgba(0,0,0,0);

 

backgroundの意味がわからない方は、以下の記事を参考にしてください。

no image
backgroundとbackground-×××××の違いは?実装サンプル例を元に解説!【CSS初心者】

続きを見る

rgba(0,0,0,0);の数値について
X Y Z A
background-color: rgba( 0, 0, 0, 0 );

X・Y・Zの数値は1〜255までのRGBカラーに沿って書いてください

ちなみに、rgbaの値には、16進法の値(#FFFFFFなど)は利用できませんので覚えておきましょう

Aの値に関しては、前者のRGBカラーの透明度を表すもので、0〜1までの小数で指定します

0の場合は100%の透明で何も見えません。1の場合は透明効果はないのでそのままの色になります。

以下が実装例になりまして、文字を透過させず、背景の赤色だけ30%の透過仕様になっています。

<div style="background: url(https://designerbrg.com/blog/wp-content/uploads/2020/09/highquality_pictures_face_paint_children.jpg); width: 500px; height: 333px;"><p style="font-size: 3.0em; line-height: 3.0em; font-weight: bold; text-align: center;color: #fff; background: rgba(208,19,0,0.3); ">KIDS コーナー</p></div>

実装例

KIDS コーナー

まとめ

いかかでしたででしょうか?

CSSプロパティの「値」で「rgba」は非常に役立ちます。

今回のように、背景画像のうえでオブジェクトの背景色を透過させる事はもちろんですが、例えば色なんかを決める際でも、RGBで指定してから透明度を下げる(微調整する)事で、周りの色と馴染ませる事が容易になります。色をピンポイントで合わせていくのって、結構手間だったりするんですよね。

背景色を透過させるにはopacityを使う方法で考えがちですが、難しい事ではなく、基本的な値を変更するだけとっても簡単に実装できますね。

完全無料のクリエイター育成講座開催中!

人物イラストの無料ダウンロードサイト公開中!

人物イラストの無料ダウンロードならMIDO-KICHI

-Webデザイン

Copyright© デザイナーブリッジ , 2020 All Rights Reserved.