css实现背景透明化

对于半透明的效果,用到一些地方能起到画龙点睛的作用。而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)
赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » css实现背景透明化
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏