父元素使用opacity将子元素都变透明了的解决方案

原创 2016年08月29日 16:11:09

    使用opacity不仅使目标元素的背景变得半透明,而且使它所有的子元素的背景也变成了半透明。这意味着它里面所有的文本、图片也一样都具有同样的透明度,这个效果肯定不是我想要的。


解决办法:

可以用 rgba()解决 : background: raba(x1, x2, x3, y); x1 x2 x3取值是0-255之间的整数,y取值是0-1之间(00.10.20.30.40.50.60.70.80.91) 


<span style="font-size:18px;">div {background-color:rgb(255,255,255);background-color:rgba(255,255,255,0.9);filter: alpha(opacity=90);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";}</span>


相关的文章:

使用RGBa和Filter实现不影响子元素的CSS透明背景

html子元素不继承父元素(opacity)的解决方法

给父元素设置了背景颜色加透明background-color: #000; opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50);发现效...
  • qq_17034925
  • qq_17034925
  • 2017年05月18日 13:49
  • 2459

CSS —— 元素hidden与opacity=0的区别

之前调试页面时偶然发现,hidden与opacity看似都不可见,但实有区别: visibility:hidden则相当于完全从文档流中删除了该元素,但所占据的尺寸仍然保留。 opacity:0则仅仅...
  • qq_19865749
  • qq_19865749
  • 2016年07月25日 18:41
  • 2460

JQuery学习笔记(六)——css操作、事件处理和动画

样式操作、事件处理、动画效果
  • u011499992
  • u011499992
  • 2016年08月23日 21:30
  • 487

css 只改变父元素的透明度,不改变子元素透明度rgba+opacity

给元素加透明度,通常写法为:opacity:0.5,filter:alpha(opacity=50); 实际在给父元素背景设置透明度时,子元素内容继承了父元素的透明度。 如何让子元素脱离父元素的透明度...
  • zhanghuihuihappy
  • zhanghuihuihappy
  • 2016年03月30日 20:32
  • 10050

浅谈设置父元素透明度不影响子元素透明度

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。 即使设置子元素opacity:1,子元素的opacity:1也是在父元素...
  • zhouziyu2011
  • zhouziyu2011
  • 2017年03月15日 10:50
  • 2777

[转]设置元素透明度,div内子元素不透明opacity

如果要实现透明边框,子元素不透明,那么就要用这个组合:  {filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f00...
  • yhyclelo
  • yhyclelo
  • 2016年12月15日 17:14
  • 3577

CSS实现父层透明,子层不透明

利用CSS中的opacity属性可以实现一些视觉效果,但是父元素设置透明属性会被子元素继承,这是不想见到的,于是通过一些设置解决这个问题。filter:alpha(opacity=50); -moz-...
  • tlzhatao
  • tlzhatao
  • 2015年12月02日 14:47
  • 3521

CSS常见问题解决002——opacity将子元素都变透明了

参考链接: http://zhidao.baidu.com/link?url=2FzSxWr5XjVr6rohwvCBgMgXoMVv84js-P9j7eqlS-swdgkt_BRF4hULt2BQ...
  • tongbiaos
  • tongbiaos
  • 2016年08月25日 00:25
  • 3373

关于子元素继承父元素透明度(opacity)的解决方法

今天在做移动端的时候遇到了子元素继承父元素的透明度(opacity)的情况,下面贴出解决方法: 问题重现: .opacity{background: #000;opacity:0.7} 这种写法...
  • m1049113996
  • m1049113996
  • 2015年07月30日 10:40
  • 7262

css3父元素模糊不影响子元素

css3父元素模糊不影响子元素的效果 content: ""; position: absolute; filter:blur(5px); z-index: -1; backgroun...
  • u014520745
  • u014520745
  • 2017年01月17日 17:43
  • 1355
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:父元素使用opacity将子元素都变透明了的解决方案
举报原因:
原因补充:

(最多只允许输入30个字)