父元素使用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透明背景

CSS透明opacity和IE各版本透明度滤镜filter的最准确用法

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理,保持浏览器效果的一致,这个估计谁都会写,但是涉及到filter的具体语法含义和各版本写法的...

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

设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度。 即使设置子元素opacity:1,子元素的opacity:1也是在父元素...

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

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

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

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

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

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

Windows Phone 8.1中元素适应屏幕宽度或子元素继承父元素宽度的解决方案

在Windows Phone开发过程中,对不同尺寸手机屏幕的适应是对编程的一大要求和挑战,当然这就像做网站要适应各 种各样的电脑屏幕的大小一样. 当然在WP开发这一点上,微软给了我们很多中已经封装...

IE6下hover伪类显示隐藏子元素bug及解决方案

周所周知,ie6只有a元素支持hover伪类,在实际应用中,为了兼容ie6,有时候会使用a元素来做子元素的显示及隐藏,比如下图: 黄色小tips默认隐藏,鼠标hover到“促”字图标后,...

CSS中子元素浮动导致父元素高度塌陷解决方案

float的定义: 定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级元素,而不论它本身是...

[译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更...
  • GoodShot
  • GoodShot
  • 2015年03月17日 21:04
  • 20004
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:父元素使用opacity将子元素都变透明了的解决方案
举报原因:
原因补充:

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