CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSS3のopacityプロパティで要素の不透明度を指定する方法

opacityプロパティとは？

opacity（不透明度）は、CSS3で導入されたプロパティで、要素の透明度を数値で指定できます。値は0.0（完全に透明）～1.0（完全に不透明）の範囲で指定し、数値が小さいほど要素は透明に、大きいほど不透明に表示されます。

次の例では、赤・緑・青の3つの要素にopacity: 0.6を指定し、半透明の状態で表示しています。

サンプルコード

<html>
   <head>
      <style>
         #m1 {background-color:rgb(255,0,0);opacity:0.6;}
         #m2 {background-color:rgb(0,255,0);opacity:0.6;}
         #m3 {background-color:rgb(0,0,255);opacity:0.6;}
      </style>
   </head>
   
   <body>
      <p id = "m1">赤（Red）</p>
      <p id = "m2">緑（Green）</p>
      <p id = "m3">青（Blue）</p>
   </body>
</html>

表示結果のポイント

このコードをブラウザで表示すると、3つの段落がそれぞれ60%の不透明度で描画され、背後の背景が透けて見える半透明の状態になります。このようにopacityプロパティを使えば、要素全体を簡単に半透明化できます。

opacityとrgba()の違い

opacityプロパティは、テキストを含む要素全体に透明度が適用されます。一方、background-colorをrgba()で指定した場合は、背景色のみが半透明になり、テキストは不透明のまま表示されます。デザインの目的に応じて、両者を使い分けるとよいでしょう。

  1. すべてのブラウザに対応するCSS不透明度（opacity）の設定方法

    CSSのopacity（不透明度）プロパティは現在の標準的なソリューションであり、Firefox 0.9以降、Safari 2、Opera 9以降、Internet Explorer 9以降、そしてすべてのバージョンのChromeで動作します。しかし、さらに古いブラウザにも対応させるには、各ブラウザ固有のプロパティをフォールバックとして併用する必要があります。ブラウザ別の不透明度プロパティopacity — モダンブラウザ向けの標準プロパティ（値は0〜1で指定）-moz-opacity — Firefox 0.9より前のバージョン向け-khtml-opacity — Safari 1以降の旧バ

  2. HTML DOMのstyle.opacityプロパティとは？使い方を徹底解説

    DOM の style.opacity プロパティは、HTML ドキュメント内の要素に適用されている CSS の opacity（不透明度）プロパティの値を取得したり、動的に変更したりするために使用されます。JavaScript を使えば、ボタンのクリックなどのユーザー操作に応じて要素の透過度を簡単に制御できます。 構文 style.opacity プロパティの基本構文は以下のとおりです。 1. opacity の値を取得する場合 object.style.opacity 2. opacity の値を変更する場合 object.style.opacity = value; 設定できる値は「0」