WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!

CSSで背景を半透明にする方法

「CSSで背景色を半透明する方法」をご紹介します。

この記事は約 5 分で読めます。

背景色を半透明にする方法

簡単に背景色を半透明にしたいのであれば、以下の定義をCSSに記述するだけで背景色を半透明にすることができます。

background-color:transparent;

ただ、この方法では特定のブラウザでは、背景色が半透明にならないケースが出てきます。

そこで主だったブラウザに対応した定義方法をご紹介しますね。
背景色を半透明にしたい場合、そのセレクタに以下の様な定義を記述しましょう。

filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity:0.6;

この定義を加えるとどの様になるのか以下をご覧ください。

黒背景の上に白背景のエリアがあります。

この白背景のエリアに先ほど記述した定義を加えると以下のようになります。

いかがでしょうか?
白色の背景色が半透明になっているのがお分かりになると思います。

半透明の度合いを自在に指定しよう。

半透明の度合いは数値を指定することで自在に指定することができます。

filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity:0.6;

上記の数値・60、0.6が半透明の度合いを示す数値です。

この数値を大きくすれば透明度は高く(より透明に)なりますし、逆に小さくすれば透明度は低くなります(透明になりません)。

下記に数値を変えたモノを掲載しましたのでご確認ください。
指定した数値は上から、20、40、60、80です。

まとめ

背景色を半透明にする方法は、どうでしたでしょうか?

あまり使う機会は無いかもしれませんが、マウスオーバーで背景色を変えたい時など、単に色を変えるより背景を半透明にすると良い感じになるかもしれません。

今回は「CSSで背景色を半透明にする方法」をご紹介させていただきました。

シェアしていただきありがとうございます。

この記事が気に入ったら【いいね】しよう!

著者:とあるWEBディレクター

岡山在住のWebディレクターです。Wordpressを使ったWEBサイト制作を中心に7年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

  • 初心者でも簡単!モーダルウィンドウを7分で導入する方法!

    初心者の方でも簡単にモーダルウィンドウをサイトに導入する方法をご紹介します。モーダルウィンドウを導入したいけど上手く導入することができなかった方、ぜひ参考にしてください。 記事を読む

  • ハイクオリティ!お金を出す価値のある有料素材配布サイトを12個まとめてみた

    WEBデザインに欠かせない有料素材の販売サイトをまとめてみました。WEBサイトの制作を行うに当たって、有料素材の購入は避けては通れません。参考にしてください。 記事を読む

  • 【レスポンシブサイト】デバイスの横幅で画像を切り替える方法

    サイトにアクセスしたデバイスの横幅で画像を切り替える方法をご紹介します。レスポンシブサイトで、PCとスマホで違う画像を表示させたい場合などに使えます。5分程度で実装できますので、興味のある方は参考にしてください。 記事を読む

  • バナーデザインの基本が分かる!7つのコンテンツをご紹介します。

    バナーデザインの基本が分かる!7つのコンテンツをご紹介します。サイトを運営しているとバナーを制作する機会は多くあると思います。でも、自分で作ると素人っぽくなりませんか?しっかりと基本を抑えてプロっぽいバナーを作成して見ましょう。 記事を読む

  • 【SEO対策】text-indent:-9999pxを使わずテキストを画像に置換する方法

    text-indent:-9999pxを用いて、テキストを画像に置換する手法をご存知でしょうか?この手法、便利なのですが、SEO的に不利だと言われています。そこで今回は、text-indent:-9999pxを使わずテキストを画像に置換する方法をご紹介いたします。 記事を読む

コメントを残す


(必須)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)