エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
【CSS】背景のみ透過させて表示する方法 | Designmemo(デザインメモ)-初心者向けWebデザインTips-
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
【CSS】背景のみ透過させて表示する方法 | Designmemo(デザインメモ)-初心者向けWebデザインTips-
CSSを使って背景などの要素の不透明度を下げて透過させたりすることはあります。その際に使用するプロパ... CSSを使って背景などの要素の不透明度を下げて透過させたりすることはあります。その際に使用するプロパティとして「opacity」がありますが、これを使って指定した場合、要素内すべてに不透明度が適用されてしまうので、背景だけではなく、その上にあるテキストや画像なども一緒に透過されてしまいます。これでは背景のみ透過させてテキストなどは普通に表示させたいといった場合に使用することができません。それでは、背景だけ透過させたい場合の方法を見ていきましょう。 背景のみ透過させる方法 背景だけを透過させて表示するのは、backgroundプロパティに「rgba()」を使用してあげることで実現することができます。 //opacityを使った場合 div { background: #009dff; opacity: 0.5; } //rgbaを使った場合 div { background: rgba(0,