WordPressを用いたホームページ制作はお任せください!岡山県を中心に絶賛活動中!
  • 記事公開:2014/12/09
  • 最終更新:2015/09/17

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関連の記事でお役に立てれば幸いです。

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

  • 美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。

    美しいグラデーションをCSSだけでどこまで実現できるのか検証してみました。CSSだけでデザインにグラデーションを導入したい方は参考にしてください。5分後にはグラデーションを自由自在に操れるようになります。 記事を読む

  • まとめて良かった!WEBデザインするときに参考になるデザインまとめサイトのまとめ

    WEBデザインの参考になる21の「デザインまとめサイト」をご紹介します。WEBデザインをする方には、役立つコンテンツかな~と勝手に思い込んでいます。WEBデザインの参考にしてください。 記事を読む

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

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

  • 片方だけ横幅を設定してfloatする方法

    片方だけ横幅を設定してfloatする方法をご紹介します。横並びの要素で一方だけ横幅を設定したいあなたは、このコンテンツを参考にしてください。2分後にはあなたの希望が形になります。 記事を読む

  • 【スマホサイト】iPhoneからフォームを入力するとき勝手に画面を拡大させない方法

    iPhoneでWEBサイトの検索フォームを利用する場合など、自動的に画面が拡大されてしまいます。この機能、便利に感じる場合もありますが、ちょっと【うっとおしい】とかんじる場合もあります。今回は、この画面拡大を回避する方法のご紹介です。 記事を読む

コメントを残す


(必須)

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