CSSで色を透明にする方法-フロントエンドQ&A-php.cn

CSSで色を透明にする方法

藏色散人

リリース： 2023-01-04 09:36:46

オリジナル

3865 人が閲覧しました

CSS で色を透明にする方法: まず HTML サンプルファイルを作成し、次に div を作成し、最後に「opacity:0.5;」属性を通じて要素の背景の透明度を設定します。

CSSで色を透明にする方法

このチュートリアルの動作環境: Windows7 システム、css3、thinkpad t480 コンピューター。

#推奨: 「

css ビデオチュートリアル」

CSS 色の透明度

1. 要素の背景の透明度を設定します

opacity は要素の背景の透明度を設定するために使用できます。0 から 1 までの値が必要です。

0 は完全に透明 (不透明度: 0) を意味します。

1 は完全に不透明 (不透明度: 1);

0.5 は半透明 (不透明度: 0.5) を意味します;

コードのデモ:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>opactity</title>
    <style>
    .box1{
                position:relative;
        width:200px;height:200px;
        background-color: #00f;
    }
         .box2{
              position:absolute;
              top:80px;
              left:80px;
              width:200px;
              height:200px;
              background-color:#0f0;
       }
       .box3{
             position:relative;
              width:200px;
              height:200px;
              background-color:#f00;
              z-index:1;
}
</style>
</head>
<body>
    <div></div>
       <div></div>
       <div></div>
</body>
</html>

ログイン後にコピー

同じ名前を設定する前に要素のパフォーマンスを比較します:

CSSで色を透明にする方法

#透明度設定の効果

.box1{
                 position:relative;
             width:200px;height:200px;
            background-color: #00f;
            z-index:10;
            opacity:0.5;
     }
          .box2{
               position:absolute;
               top:80px;
               left:80px;
               width:200px;
               height:200px;
               background-color:#0f0;
               z-index:5;
               opacity:0.5;
        }
        .box3{
               position:relative;
               width:200px;
               height:200px;
              background-color:#f00;
             z-index:1;
               opacity:0.5;
 }

ログイン後にコピー

パフォーマンス効果:

CSSで色を透明にする方法

2. ブラウザの互換性の問題:

CSSで色を透明にする方法

不透明度属性は IE8 以下のブラウザではサポートされていません。

CSSで色を透明にする方法

透明効果を実現するには、IE8 と以下ブラウザは代わりに次のタグを使用する必要があります:

alpha(opacity=transparency)

透明度 0 から 100 までの値を選択してください

0 は完全に透明であることを意味します (フィルター: alpha(opacity=0);)

100 は完全に不透明を意味します (filter:alpha(opacity=100);)

50 は半透明を意味します (filter:alpha(opacity=50); )

このメソッドは IE6

filter:alpha(opacity=50);
.box1{
                position:relative;
        width:200px;height:200px;
        background-color: #00f;
                z-index:10;
                opacity:0.5;
                filter:alpha(opacity=10);
    }
.box2{position:absolute;
      top:80px;
      left:80px;
      width:200px;
      height:200px;
      background-color:#0f0;
      z-index:5;
      opacity:0.5;
      filter:alpha(opacity=50);}
.box3{
      position:relative;
      width:200px;
      height:200px;
      background-color:#f00;
      z-index:1;
opacity:0.5;
filter:alpha(opacity=80)}

ログイン後にコピー

をサポートしますパフォーマンス効果: IE8 以下のブラウザにもうまく適応できます

CSSで色を透明にする方法

なぜなら、この要素は以下に filter:alpha(opacity=transparency) と記述していますが、 filter:alpha(opacity=transparency) の優先度は opacity:0.5; の優先度よりも高くなります。最終的なパフォーマンス効果は不透明度:0.5

ではありません。

以上がCSSで色を透明にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。