[分享]css中怎么让背景透明

CSS中的背景透明度可以通过设置rgba或者opacity属性来实现。

 background-color: rgba(0,0,0,0.5);
  opacity: 0.5; 

其中，rgba中的a代表alpha，取值范围为0~1，值越小越透明。而opacity的取值范围也为0~1，同理值越小越透明。

需要注意的是，如果某个容器设置了透明度，那么该容器中所有的子元素都会继承这个透明度。如果需要避免这种情况，可以将这个容器设为background-clip: padding-box; 或者使用伪元素来实现半透明效果。

 /* 设置容器背景透明同时不影响子元素： */
  background-color: rgba(0,0,0,0.5);
  background-clip: padding-box;
  
  /* 使用伪元素实现半透明效果： */
  .box:before {
    content: ';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: -1;
  } 

最后需要注意的是，IE8及以下版本不支持rgba属性，而且使用opacity属性会影响元素内部的文本内容，使其也变得半透明，这时候可以使用IE的滤镜来实现。