【CSS】opacityとは? ~要素を透過させる方法~ | MUKKUN QUEST
MUKKUN QUEST     

【CSS】opacityとは? ~要素を透過させる方法~

HTML&CSS

【CSS】opacityの解説です。読み方は「オパシティ」
要素を透過させる方法を知りたい方はこちらで解決します💡

スポンサードサーチ

【CSS】opacity ~要素を透過させる方法~

具体的に解説していきます。

【実例】opacityはこう打てば、こうなる


この画像は、黒い背景に、白の文字を打ち込んだものです。文字に対してopacityをかけてみます。

☝このように打つことで
☟このように文字が透明度0.5の状態になり、背景の黒が透けた字になりましたね💡

【使い方】opacityは実際にこう使う

上の画像の通り、数字で透明度を指定することができます。

【特徴】opacityの持つ特徴

●opacityは、要素をすべて透過させるので、要素内の文字の一部を透過するようなことはできません。

【注意】opacityを使う時に起こりやすいミスの事例

●透過の度合いを示す数字に単位を指定する必要がないので、誤って「px」「%」などをつけないよう注意。

opacityに似た効果を持つCSS

●文字の透明度を変更する方法