CSSで色の透明度を設定する方法-CSSチュートリアル-php.cn

CSSで色の透明度を設定する方法

王林

リリース： 2023-01-06 11:14:15

オリジナル

12402 人が閲覧しました

CSS で色の透明度を設定する方法は、指定した要素に opacity 属性を追加し、[opacity:0.5;] などの適切な不透明度を設定することです。これは、要素を半透明に設定することを意味します。

CSSで色の透明度を設定する方法

#この記事の動作環境: Windows10 システム、css 3、thinkpad t480 コンピューター。

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

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

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

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

構文:

opacity: value|inherit;

ログイン後にコピー

属性値:

value 不透明度を指定します。 0.0 (完全に透明) から 1.0 (完全に不透明) まで

<!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>

ログイン後にコピー

.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で色の透明度を設定する方法関連ビデオ共有: