CSSで薄らとした半透明のカラーを作成する方法(透過の指定)

HTML/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で薄らとした半透明のカラーを作成する方法(透過の指定)」でした

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

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

もうほぼ透明ですねwww

2020年3月21日HTML/CSSCSS,WEB

Posted by KT