css如何写透明度

这篇文章将为大家详细讲解有关css如何写透明度，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

在css中如果我们要设置透明度的话，我们可以使用opacity属性和rgba（）来设置。而且在使用中我们要知道opacity是使用来设置透明程度的，对于rgba（）的话则是用来对颜色设置透明度的。那么我们先来了解一下opacity与rgba（）。

1.opacity属性

当我们在使用这个属性的时候我们可以设置的透明度值的范围在0.0至1.0之间，对应的值越小说明透明度越大，反之则透明度越小。

语法：

opacity: value|inherit;

在语法中的value是指不透明度的值。而inherit则是表示opacity属性的值应该从父元素继承。

2.rgba（）

RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 "alpha" 通道，而且还可以对颜色设置透明度。

语法：

rgba（R,G,B,A）;

对rgba() 里的值的介绍：R：红色值。正整数 （0~255）G：绿色值。正整数 （0~255）B：蓝色值。正整数（0~255）A：透明度（取值0~1之间）。

3.案例

(1)、设置文本透明

我们通过将文本设为透明来观察其内容，代码如下：

                                                              
              
透明盒子
              
10% 不透明度
              
50% 不透明度
              
80% 不透明度
              
100% 不透明度


                        
              
rgba颜色值
              
10% 不透明度
              
50% 不透明度
              
80% 不透明度
              
100% 不透明度
         
        [object Object]

在结果中我们看到根据不同的opacity中的vue值会呈现不同的透明度。

(2)、图片透明设置代码如下：

                                                  
                 
设有透明度图
                       
                 
                        
原图
                                        
      

关于"css如何写透明度"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。