css两种设置透明度的方法

opacity：opacity 属性指定了一个元素的不透明度。换言之，opacity 属性指定了一个元素后面的背景的被覆盖程度。它设置的是整个元素的透明，包括里面的子元素。

取值：0 - 1，0代表全透明   1代表不透明。

HTML部分：

 
<div class="container">
        <div class="inner">

            我是inner中的span

        </div>
    </div>

css部分：

  
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 这里是我放的背景图 */
            background-image: url("../images/img12.jpg");
            height: 100vh;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color:#000;
            color:white;
            opacity: .5; 
         
           

        }

效果如下：

alpha通道，这也是我们常用的一种方式，可以精细的设置每个元素的颜色，不会影响到其他元素。

取值为0-1,0代表完全透明，1代表不透明。

HTML部分：

 
<div class="container">
        <div class="inner">

            我是inner中的span

        </div>
    </div>

css部分 ：

 * {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 这里是我放的背景图 */
            background-image: url("../images/img12.jpg");
            height: 100vh;
            background-position: center;
            background-attachment: fixed;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
           
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, .5); 
            color: rgba(153, 239, 216, 1);
            /*
            这里为了显示border透明效果我将背景图设置了background-clip: padding-box;
             目的是让背景图只延伸至padding区域
            */
            background-clip: padding-box;
            border: 10px solid rgba(0, 0, 0, .6); 
            
          

        }

效果图如下：