【CSS】opacityとは？ ～要素を透過させる方法～
【CSS】opacityの解説です。読み方は「オパシティ」
要素を透過させる方法を知りたい方はこちらで解決します💡
もくじ
●【実例】opacityはこう打てば、こうなる
●【使い方】opacityは実際にこう使う
●【特徴】opacityの持つ特徴
●【注意】opacityを使う時に起こりやすいミスの事例
●opacityに似た効果を持つCSS
スポンサードサーチ
【CSS】opacity ～要素を透過させる方法～
具体的に解説していきます。
【実例】opacityはこう打てば、こうなる
この画像は、黒い背景に、白の文字を打ち込んだものです。文字に対してopacityをかけてみます。
☝このように打つことで
☟このように文字が透明度0.5の状態になり、背景の黒が透けた字になりましたね💡
【使い方】opacityは実際にこう使う
上の画像の通り、数字で透明度を指定することができます。
【特徴】opacityの持つ特徴
●opacityは、要素をすべて透過させるので、要素内の文字の一部を透過するようなことはできません。
【注意】opacityを使う時に起こりやすいミスの事例
●透過の度合いを示す数字に単位を指定する必要がないので、誤って「px」「％」などをつけないよう注意。
opacityに似た効果を持つCSS
●文字の透明度を変更する方法