透明度 opacity rgba(red, green, blue, alpha) filter:Alpha(opacity=x)

痛定思痛。 2022-04-16 05:56 214阅读 0赞

opacity：设置opacity的元素的所有后代元素都一起具有透明度

rgba的前三个值范围是从0到255的整数或者0%到100%的百分比，仅设置背景透明度，不影响后代元素。  
**只要涉及到color的地方都可以用rgba**  
例如：和box-show配合使用，和渐变linear-gradient（线性渐变）/radial-gradient（径向渐变）配合使用

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(205, 205,193 , 0.3));
    box-shadow:3px 3px 6px rgba(255,255,255,.3);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]

rgba还可以用在伪元素中起到调和颜色的作用：

.list li {
    	&:after {
    		content: "";
    		position: absolute;
    		left: 0;
    		top: 0;
    		width: 100%;
    		height: 100%;
    		background: rgba(#000, 0.1);
       }
    }

对于考虑到不支持rgba的情况，可以这么写：

.elem {
      background: #fff; 
      background: rgba(255, 255, 255, 0.5); /* 不支持rgba的浏览器将会忽略这个命令 */
    }

IE专属滤镜 filter:Alpha(opacity=x)，x范围从0到100  
实现背景透明，内容不透明

.demo{
      padding: 25px;
      background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */
    }
    .demo p{
      color: #FFFFFF;
    }
    @media \0screen\,screen\9 {/* 只支持IE6、7、8 */
      .demo{
        background-color:#000000;
        filter:Alpha(opacity=50);
        position:static; /* IE6、7、8只能设置position:static(默认属性) ，否则会导致子元素继承Alpha值 */
        *zoom:1; /* 激活IE6、7的haslayout属性，让它读懂Alpha */
      }
      .demo p{
        position: relative;/* 设置子元素为相对定位，可让子元素不继承Alpha值 */
      }  
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poYW9oYW5xcQ_size_16_color_FFFFFF_t_70]: /images/20220416/bfa9853c2fd140c19c8597b94624c470.png