Web blog WEBブログ

CSSで画像や文字などを透過させる方法

2019.05.13

こんにちは。コーダーの兼山です。

今回は、CSSで画像や文字などを透過させる方法を紹介します。

リンクのhover時の表現などに、よく使用される指定なので是非、覚えておきましょう!

opacityプロパティで透過する

opacity: 透過度;
で表現できます。

値は、1~0の間の整数で記述。
1は不透明度100%。値が小さくなるほど透明になります。

尚、今回の記述では、ベンダープレフィックスを記述しています。
基本的には不要かと思います。

filter:alpha(opacity=値); → Internet Explorer
値は、100~0の間の整数で記述。
100は不透明度100%。値が小さくなるほど透明になります。

-moz-opacity:値; → Firefox
値は、1~0の間の整数で記述。
1は不透明度100%。値が小さくなるほど透明になります。

opacityの特徴は、colorやbackgroundなど、全体が透過します。

RGBAカラーモデルで透過する

RGBA値で色の指定をします。
rgba()は色の透明度まで指定することが可能です。

rgba(「0~255」,「0~255」,「0~255」,「0~1」)

最後の「0~1」がalpha値になります。
「0」に設定した場合は完全に透明になります。
「1」にした場合は透過されません。

rgbaの特徴は、backgroundは透過しますが、colorやborderは透過しません。

【注意】
rgba()はIE8以下では対応していないので注意が必要です。

テキストを透明にする

プロパティの値に『transparent』を記述することで、テキストや背景を透明にできます。

【例】
background-color: transparent;
color: transparent;

【注意事項】
transparentは、透明の指定ができる値ですが、
テキストを意図的に透明にして隠す行為は、やめましょう。
検索サイトからペナルティを受ける場合があるので注意が必要です。

まとめ

opacityプロパティとRGBAカラーモデルは、どちらも透過させられるという点で一見すると用途が似ているように思えますが、それぞれ特徴がありますので、それらを上手く見極めて使用しましょう!

例えば、「背景だけを透過させたい場合には、rgbaを使う」等、自分なりの活用パターンを決めてみるのも良いかもしれません。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口