css对透明度有影响的属性

CSS中有几个与透明度相关的属性，它们分别是opacity、rgba、hsla和transparent。下面我们来一一介绍。

.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50); /* 兼容IE8及以下 */
}

css对透明度有影响的属性

opacity属性指定元素的不透明度，取值范围为0.0到1.0之间，0.0表示完全透明，1.0表示完全不透明。该属性不会影响元素的布局，它会把整个元素及其内容都变成半透明的。需要注意的是，opacity属性不会继承。

在Internet Explorer 8及以下版本浏览器中，我们需要使用filter属性来实现相同的效果。在这种情况下，opacity属性只能用于对IE9及以上版本浏览器的支持。

.rgba {
  background-color: rgba(255,0.5); 
}

rgba是CSS3中引入的色彩模式，它与RGB十分相似，但是增加了一个透明度的属性，取值范围为0.0到1.0之间。其中，前三个参数代表红、绿、蓝三个颜色通道的值，最后一个参数代表透明度。使用这种方式可以让背景有半透明的效果。

.hsla {
  color: hsla(120,60%,70%,0.7);
}

hsla同样是CSS3中引入的色彩模式，与hsl有相似之处，同样增加了透明度属性，所以它是“色相、饱和度、亮度、透明度”的缩写。需要注意的是，hsla中的值取值范围为0%到100%之间，而不是0到255之间。

.transparent {
  background-color: transparent;
}

transparent是一种特殊的颜色值，在CSS中代表完全透明。使用该属性可以让元素背景变得透明，但是不会影响到元素的其他样式。