全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
Web blog WEBブログ
CSSで画像や文字などを透過させる方法
2019.05.13
※この記事は2019年05月13日時点の情報をもとに作成されました。
こんにちは。コーダーの兼山です。
今回は、CSSで画像や文字などを透過させる方法を紹介します。
リンクのhover時の表現などに、よく使用される指定なので是非、覚えておきましょう！
- 1. opacityプロパティで透過する
- 2. RGBAカラーモデルで透過する
- 3. テキストを透明にする
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を使う」等、自分なりの活用パターンを決めてみるのも良いかもしれません。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
