CSSで薄らした半透明カラーの作成方法（透過の指定）

今回は、CSSを使って要素やカラーを半透明にする方法を紹介します。今回使用する方法は2種類あります。プロパティの「opacity」を使用した方法と、「rgba」のaのチャンネルを使用した方法です。

以下は「opacity」を使用した実際の半透明なデザインです。

あいうえおかきくけこ

以下は「rgba」を使用した実際の半透明なデザインです。

あいうえおかきくけこ

opacity

<style>
p{
background-color:#dc143c; 
opacity:0.4"
}
</style>

opacityは色に限らず、指定した要素全てを透明化します。

0.0~1.0までを指定します。1.0が100%なので透明無しの状態で、0が0%なので全く表示されない完全に透明の状態になります。

上記の背景のみを透明化したい場合いは、div要素で背景色を指定して、そこのみにopacityを指定すれば可能です。

rgba

<style>
p{
background-color:rgba(190, 46, 30 ,0.1)
}
</style>

rgbaはカラーコードの指定の仕方です。要素を透明化するのでは無く、透明感のあるカラーを指定するだけです。

rgbaでも0.0~1.0までの値を指定します。0は0%、1は100%です。

カラーコードいついては以下を見て下さい。

CSSでカラーを変更する方法（カラーコードの基礎知識）

今回は、CSSでテキストカラーや背景色などを変更する記述の仕方を紹介いたします。またカラーコードについても少しだけ触れますので良かったら参考にしてみて下さい。

kt-life.net

2020.03.10

以上が「CSSで薄らした半透明カラーの作成方法（透過の指定）」でした

因みに下記は今回紹介した二つを組み合わせた感じのデザインです。

テキストテキストテキストテキストテキスト

もうほぼ透明ですねwww