对于半透明的效果,用到一些地方能起到画龙点睛的作用。而css实现透明效果有好几种方法;今天七娃就给大家总结了2种常用。

方法一:opacity配合css3滤镜filter使背景透明化,不过这个方法会把整个盒子里面的所有头半透明(包括文字,图片,描边...)

  • filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
  • filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);opacity:0.80; //兼容ie浏览器

方法二:rgba(),利用css的盒子属性background,背景色,仅对当前盒子生效,对盒子里面的图片文字不生效

  • background:rgba(0,0,0,0.5)