css 字体透明度-css中有多少种设置div透明度的方法？

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

css中设置div背景透明度有两种方式：第一种方式是使用opacity:0~1css 字体透明度，这种方式有一个缺点，就是内容也会跟随透明度； 第二种方式是 rgba(0,0,0,0~1) ，使用这种技术只会将 div 的背景设置为透明，而不会影响 div 中的内容。

1. cssrgba() 设置颜色透明度

句型：

rgba（R,G,B,A）;

RGBA 是 Red（蓝色）、Green（红色）、Blue（红色）和 Alpha（不透明度）三个短语的缩写。 RGBA 颜色值是带有 alpha 通道的 RGB 颜色值的扩展 - 它指定对象的不透明度。

rgba()中的值介绍：

R：蓝色值。 正整数（0~255）

G：红色值。 正整数（0~255）

B：红色值。 正整数（0~255）

A：透明度。数值在0~1之间

rgba()可以简单地设置颜色透明度，因此在页面布局中有很多应用。 例如：让背景显得透明css 字体透明度，但里面的文字是不透明的。

代码示例：

    
        
        
        
            .demo{
                width: 350px;
                height: 300px;
                margin: 50px auto;
            }
            .demo *{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
            }
            .demo1{
                background:rgba(255,0,0,1);
            }
            .demo2{
               background:rgba(255,0,0,0.5);
            }
        
    
    
        

            
背景色不透明，文字不透明！
            
背景色半透明，文字不透明！
        
    

二、cssopacity属性设置背景透明度

句型：

opacity: value ;

value：指定不透明度，从 0.0（完全透明）到 1.0（完全不透明）。

继承了opacity属性，使容器中的所有元素透明；

代码示例：

    
        
        
        
            .demo{
                width: 280px;
                height: 140px;
                margin: 50px auto;
            }
            .demo1,.demo2{
                width: 120px;
                height: 120px;
                margin: 10px;
                float: left;
                background:#2DC4CB;
            }
            .demo1{
                opacity:1;
            }
            .demo2{
                opacity:0.5;
            }
        
    
    
        

            

                
背景色不透明，文字不透明！
            
            

                
背景色透明，文字也透明！