CSS样式的透明效果实现

早之前，要实现透明效果是非常麻烦的一件事，要用gif图片代替。

现在，只需要在CSS里声明一段话即可实现透明效果

还可以修改值来实现透明程度

【爆款云服务器限时促销】
阿里云云服务器ECS实例2核2G，新人专享渠道特惠价只要82元！特惠热卖中。 点击立即购买

img {
  opacity: .5; /* 兼容 Standard: 火狐 1.5 以上, Opera, Safari */
  filter: alpha(opacity=5); /* 兼容 IE8 以下 */
  -ms-filter: "alpha(opacity=5)"; /* 兼容 IE 8 */
  -khtml-opacity: .5; /* Safari 1.x */
  -moz-opacity: .5; /* 火狐 1.5 以下, Netscape */
}

值越小越透明，点的前面可以加零也可以不加。

opacity还是有一些不太便利，比如以下例子

<div style="opacity: 0.5">
  <span>This is text</span>
</div>

div标签由于添加了opacity属性，所以它包含的所有子标签都会受影响，如果希望子标签不受影响可以使用rgba，如

<div style="background-color: rgba(233,233,0,0.5);">
  <span>This is text</span>
</div>

以上例子中，透明属性只会应用于div标签的background-color背景颜色属性，不会影响其它