css 子元素不继承父元素的透明度

最新推荐文章于 2024-03-14 15:29:21 发布
最新推荐文章于 2024-03-14 15:29:21 发布
阅读量5.5k 收藏 8
点赞数 1
分类专栏： 前端技术方案 文章标签： css opacity
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36069339/article/details/82189748
版权

用opacity给父元素设置透明度，无论如何子元素都会继承父元素的透明度，最简单的方法就是：
将父元素的 opacity:0.5; 改为 background:rgba(0,0,0,0.5)
rgba前三位为rgb颜色值，最后一位为透明度。

十六进制颜色码与RGB颜色值 在线转换网址：
http://www.sioe.cn/yingyong/yanse-rgb-16/

牧马少女
关注
专栏目录
CSS中如何设置父元素透明度不影响子元素透明度
kerryqpw的博客
07-15 8852
CSS中如何设置父元素透明度不影响子元素透明度     css中经常会遇到设置了父元素的透明度，后会直接影响到子元素的透明度。例如：设置父元素opacity：0.5，子元素不设置opacity，子元素会受到父元素opacity的影响，也会有0.5的透明度。即使设置子元素opacity：1，子元素的opacity：1也是在父元素的opacity：0.5的基础上设置的，因此子元素的opacity还是0...
CSS中如何解决子元素继承父元素的opacity属性
weixin_29947843的博客
08-02 1410
解决方案 这里有两个方案，使用rgba()间接的设定opacity的值，这个属性不会向下继承，或者既然opacity会被子级元素继承，那就把opacity属性放到同级元素实现，下面通过示例具体说说这两种方式： 1.使用rgba()间接的设定opacity rgba()有四个参数，最后一个参数就是opacity的值，和opacity单独设定效果一样，但是这个是有background属性来控制的，background不会向下继承，所以就解决这个问题啦，示例如下： <!DOCTYPE html> &l
详解CSS-opacity子元素继承父元素透明度的解决方法
11-19
在写项目页面的过程中，遇到子元素继承父元素透明度的问题，查找了好多文档给出的都是第一种方法，这种方法主要解决简单场景的，而对于设置复杂的background时，该方法不再适用。
css子类不继承父类的透明度
张井乙ccccyc的博客
02-22 4171
关于这种有两种解决办法 1、是用把父类取消换成绝对定位的写法，这样就不存在继承。（这里不做过多阐述） 2、是在父类加特定css代码上代码.父级类{ background:rgba(0,0,0,0.2) none repeat scroll !important; /*实现FF背景透明，文字不透明*/ filter:Alpha(opacity=20);/*实现IE背景透明*/ }
CSS设置父元素透明度时，如何不让子元素继承
CSND7997的博客
09-20 1837
需求： 获取16进制颜色之后转换成rgba颜色，然后设置rgba参数的第四个参数，透明度，子元素则不会继承 changeBgc(e) { let temColor = this.fromHex(this.changeColor(e.ddShiftCodeSource)); return { "background-color": `rgba(${temColor.r},${temColor.g},${temColor.b} , 0.3)`,
不想子元素继承父元素的透明度
M40153c的博客
03-16 537
将父元素的opacity设置为0.5之后，子元素一定会继承这个属性，且对子元素单独设置opacity，也无效。 这样会导致opacity属性无效，我们可以通过将背景色转换为RGG值， background:rgb(0,0,0,0.5),最后一位表示透明度，然后再子元素设置opacity，发现有效（不考虑兼容性）；代码如下 ...
子元素如何不继承父元素透明度
weixin_30535167的博客
02-05 640
opacity设置透明度子元素会继承 可以这么写，background-color:rgba(55,167,215,0.5);使用rgba子元素不会继承，但ie7,8不支持rgba 换个角度，可以不让他成为子元素，使用绝对定位使其看起来像子元素 转载于:https://www.cnblogs.com/lvke/p/4275231.html...
如何防止子容器继承父容器的透明度？用rgb背景替代opacity即可
最新发布
WenZhengshi的博客
03-14 594
在这个示例中，父容器的背景色具有一定的透明度，而子容器的背景色保持不透明，不受父容器透明度的影响。属性会影响元素及其所有子元素的透明度。但如果你想让子元素保持不透明，可以使用。这样做可以确保子容器不受父容器透明度的影响。要防止子容器继承父容器的透明度，可以使用 CSS 中的。
CSS3不透明度实例讲解
09-24
- 此外，`opacity`属性具有继承性，如果设置为`inherit`，则元素将继承其父元素的不透明度。 2. **浏览器兼容性**： - 对于IE浏览器，由于不支持`opacity`属性，我们可以使用其私有的滤镜（filter）属性来实现...
解决子元素继承父元素透明度问题
amaoagou_0124的博客
06-11 1232
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;style&amp;gt; html,body { margin:
Css 将某div设置为透明，但其子元素不透明
u012632105的博客
09-03 2340
来设置元素的透明度，但它会影响到元素的所有子元素。首先，将父元素的背景颜色设置为rgba格式，其中a表示透明度。然后，将子元素的背景颜色设置为不透明的颜色即可。这样，只会让父元素的背景透明，而不会影响到子元素。可以使用css中的属性。
子元素的div不继承父元素的透明度
weixin_30709929的博客
10-29 184
问题一： 如何让logo部变成这样： 步骤一：先收一个大的div,上面logo+nav再一个div,下面是三个div横排着； 步骤二：最主要的是如何让上面的部分变暗，而logo的颜色不变暗？ 答案：在包住logo+nav的div里设置backgroubd-color :rgba(0,0,0,0.3)就可以了 转载于:https://www.cnblogs.com/zhaowenx...
关于CSS透明度的继承问题
quboeric的专栏
08-31 3408
<br /><br />我们都知道用CSS实现透明效果用opacity这个属性（IE的话要用filter）。但是有一点很困扰人的是，使用了这个CSS属性后，其子节点也会自动继承这个属性，而且不能修改。就是说，就算你在子节点使用{opacity:1;}完全不会达到预期的效果，无论图片还是文字都跟着有透明度了。昨天在做新项目的注册页面，最终效果图如下：<br /><br />右边的背景图需要半透明效果，中间部分的主要结构如下：<br /><div class=”main”><br /><div class=”l
html css防止子元素继承父元素透明度
WenZhengshi的博客
02-02 487
background:rgba(0,0,0,0.5) ;opacity: 0.95;
CSS中不透明度继承问题的处理
weixin_30297281的博客
11-13 100
关于CSS中不透明度的设置，除了兼容方面的问题，还有不透明度继承问题，这里只讨论下后者。 那么， 什么时候会发生不透明度继承问题？ 当文档结构中有父子嵌套关系的时候，并且父元素有不透明度属性设置时，会发生不透明度继承问题，此时子元素也继承了父元素的不透明度，并且再另外设置子元素不透明度是无效的（如果父元素没有设置不透明度，子元素的设置是有效的）。 下面是相关代码和效果图： CSS部分： ...
CSS 设置背景透明度，不影响子元素
weixin_30751947的博客
01-04 991
由于 opacity 属性能被子元素继承，使用它设置父元素背景透明度时也会影响子元素． 解决方法： 1> 使用 RGBA Example 1 .classname { 2 /* RGBa, 透明度0.6 */ 3 background: rgba(0, 0, 0, 0.6); 4 } 2> 使用 opacity, 设置一个背景DIV，此DIV使用...
css 相关 为什么z-index不生效？ 如何让子元素不继承父元素的opacity
sally18的博客
09-01 1652
1.为什么z-index不生效？ Z-index 仅能在定位元素上生效，所以给div的style加上z-index:-1的同时，要记得加上position:absolute;或者position:fixed;或者position:relative;，才能生效。对于默认的position:static不生效 2.如何让子元素不继承父元素的opacity 解决方案：把涉及到opacity的父元素的opcity的透明度写法换成background:rgba()形式写背景色 3.input placeh..
挑战CSS难点：解决子元素继承父元素opacity属性的技巧
Shids_的博客
07-15 4051
挑战CSS难点：解决子元素继承父元素opacity属性的技巧
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值