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

CSSのopacityプロパティで背景に透明度を設定する方法

CSSで背景に透明度を追加するには

要素の背景に透明度を加えたい場合は、CSSの opacity プロパティを使用します。opacity の値は 0〜1 の範囲で指定でき、0 で完全に透明、1 で完全に不透明になります。値が小さいほど、要素は透けた状態で表示されます。

なお、古いバージョンの Internet Explorer に対応させる際には、filter: alpha(opacity=XX)(XX は 0〜100 の数値)を併せて指定する方法が用いられてきました。現在のモダンブラウザでは、opacity プロパティだけで正しく表示されます。

実装例

以下のコードを実行すると、opacity の値によって透明度がどのように変化するかを実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            background-color: #808000;
            padding: 20px;
         }
         div.one {
            opacity: 0.2;
            filter: alpha(opacity=20);
         }
         div.two {
            opacity: 0.5;
            filter: alpha(opacity=50);
         }
      </style>
   </head>
   <body>
      <h1>見出し</h1>
      <p>下のセクションで透明度を確認してください:</p>
      <div class = "one">
         <p>opacity 0.2</p>
      </div>
      <div class = "two">
         <p>opacity 0.5</p>
      </div>
      <div>
         <p>opacity 1</p>
      </div>
   </body>
</html>

  1. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro

  2. CSSで透明度を指定する方法｜opacityプロパティの基本と使い方

    CSSで要素の不透明度（透明度）を設定するには、opacity プロパティを使用します。値は 0（完全に透明）から 1（完全に不透明）までの数値で指定します。 例えば、要素を30%の濃さで表示したい場合は次のように記述します。 opacity: 0.3; なお、背景色だけを半透明にしたい場合は、rgba() 関数を使う方法もあります。rgba(0, 0, 255, 0.582) のように、最後の引数がアルファ値（透明度）になります。 サンプルコード 以下は、CSSを使って不透明度・透明度を表現するコード例です。 <!DOCTYPE html> <html> <he