css使用opacity会导致子元素变透明问题

最新推荐文章于 2022-12-20 10:57:50 发布
最新推荐文章于 2022-12-20 10:57:50 发布
阅读量766 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44479794/article/details/123117834
版权
当使用CSS的opacity属性使元素透明时，会发现子元素也随之变得透明。解决这个问题的一种有效方案是改用background-color属性，并使用rgba()函数设定透明度，如：background-color:rgba(0,0,0,0.35); 这样可以只影响背景而不影响子元素的透明状态。
摘要由CSDN通过智能技术生成

我们使用opacity时，会导致子元素一起变透明

解决方法：使用background-color: rgba(0,0,0,0.35);设置背景就可以了

一个诡异的bug
关注
CSS3中的Opacity多浏览器透明度兼容性问题
09-24
在CSS3中，`opacity`属性用于设置元素的透明度，允许你控制元素及其所有子元素的不透明度。这是一个非常有用的功能，但遗憾的是，并非所有浏览器都原生支持CSS3，尤其是较早的版本。这就导致了在不同浏览器间实现...
详解css透明度之rgba和opacity的区别及兼容
09-22
在CSS中，设置元素透明度有两种主要方法：rgba和opacity。两者都能达到让元素变得半透明的效果，但在使用上存在一些关键的区别。 首先，我们来看opacity属性。opacity属性用于设置整个元素（包括其内容和子元素）的...
父元素使用opacity将子元素都变透明了的解决方案
wuyou1336的博客
08-29 5911
使用opacity不仅使目标元素的背景变得半透明，而且使它所有的子元素的背景也变成了半透明。这意味着它里面所有的文本、图片也一样都具有同样的透明度，这个效果肯定不是我想要的。 解决办法： 可以用 rgba()解决 : background: raba(x1, x2, x3, y); x1 x2 x3取值是0-255之间的整数，y取值是0-1之间（0，0.1，0.2，0.3，0.4，
[css] 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？
歌谣的博客
02-08 515
[css] 当使用opacity时会使得元素的子元素也透明，此时不想要子元素也跟着透明怎么办？ 当父元素使用opacity时，子元素也会继承该透明度，即使重新设置透明度也不行。楼上的两种方法要么是放弃使用opacity，要么是放弃使用父子关系。但这都不符合和题意。按照题意，既要使用opacity又要父子关系，暂时无解。 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
父元素设置透明度之后子元素也是透明的，解决办法
weixin_42178670的博客
05-12 823
父元素设置透明度之后子元素也是透明的，解决办法是可以使用rgba的方式为父元素设置透明度，这样就不会影响子元素了，如果用opacity设置透明度就会影响子元素了
关于CSS中opacity改变透明度问题
qq_41988415的博客
05-13 822
我们如果在写背景样式时直接使用opacity，会造成背景和其文字全部透明，例如如下代码： .div1 { width: 100px; height: 60px; background-color: #a4f3c0; opacity: 0.3; font-size: 30px; } <div class="div1"> hello </div> 效果图如下 可以看出，直接使用opacity会使文字和背景全部改变透明度。 解决
css:opacity影响子元素透明度
九日的博客
04-23 752
问题：为父元素设置opacity做透明效果时。子元素会继承这个属性导致子属性也有透明效果。 <body> <div class="parent"> <div class="child"></div> </div> </body> <style> .parent{ ...
详解CSS-opacity子元素继承父元素透明度的解决方法
11-19
当父元素设置了`opacity`，例如`opacity: 0.5`，这会导致父元素及所有子元素的整体透明度降低到50%。即使子元素本身设置`opacity: 1`，它仍然会在父元素的0.5透明度基础上呈现，因此子元素看起来也会是半透明的。 #...
css中使用rgba和opacity设置透明度的区别（附图）
09-24
在CSS中，设置元素透明度的方法主要有两种：RGBA和opacity。两者都能实现透明效果，但它们之间存在一些关键差异，这些差异在实际开发中需要特别注意。 1. RGBA（Red, Green, Blue, Alpha） RGBA颜色值允许我们指定...
解决CSS3的opacity属性带来的层叠顺序问题
09-24
然而，当`opacity`值小于1时，它不仅影响元素本身，还会影响到该元素内的所有子元素，同时还会引发层叠顺序的问题。本文将深入探讨如何解决由`opacity`属性导致的层叠顺序问题。 首先，理解CSS中的层叠顺序至关重要...
解决div设置opacity后，其中的内容也随之透明化
qq_44731369的博客
08-25 3809
今天做练习，本来想实现这个效果： 没想到，它居然变成了这样： 嗯？本想用opacity来控制div背景色透明度，可这文字也变透明了，并不是我想要的效果，这是被同化了？ 其实，解决方法并不难，只需一行代码就搞定了： background: rgba(255, 255, 255, 0.2);（最后的值为关键） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
css父级div设置了透明度，子级也出现透明度的解决方法
世界太浮夸
08-31 5628
由于父级div使用了opacity设置透明度，使子级div也继承了透明度 我的解决方法是使用rgba，background-color:rgba(245,224,199,0.7)，0.7是透明度，由于rgba是css3的属性，所以必须是支持css3的浏览器才能支持rgba 语法: R：红色值。正整数 | 百分数 G：绿色值。正整数 | 百分数 B：蓝色值。正整数| 百
设置opacity里面的内容也跟着一起透明的解决方法
weixin_45575273的博客
01-18 1339
如果直接给盒子设置opacity，里面的子元素不管opacity设置多少都是会继承外面的透明度，解决办法就是用rgb设置颜色:rgba(250, 250, 250, 0.34)
透明背景上的字体也跟着颜色变浅
LM18826013676的博客
06-30 603
不要使用opacity来设置，因为这样会减低div标签整体的透明度，包括里面的内容，用rgba。还不行就试试用z-index。 转载于:https://www.cnblogs.com/Isabel4u/p/7100887.html...
挑战CSS难点：解决子元素继承父元素opacity属性的技巧
Shids_的博客
07-15 4072
挑战CSS难点：解决子元素继承父元素opacity属性的技巧
css 对div设置opacity，影响文字透明度的解决办法
书中自有妍如玉的博客
11-21 1891
背景颜色没有问题，但是第一种文字颜色明显受到了。的方式实现才是最合理的。
opacity属性会发生穿透，怎么办？
最新发布
Seimyle的博客
12-20 374
opacity属性会发生穿透，怎么办
CSS opacity - 实现图片半透明效果
dawuafang
10-16 169
opacity -- 不透明度 取值: &lt;alphavalue&gt; | inherit &lt;alphavalue&gt;: 透明度取值(取值范围[0.0,1.0]) inherit: 继承 初始值: 1(不透明) 继承性: 是 CSS3提出opacity属性 示例 div { opacity: 0.5; } 目前较老的Firefox版本，我们...
css 解决透明度穿透问题
u013141712的专栏
08-04 1876
一般情况下，透明度设置 opacity:0.6; 会导致子元素继承 这个值，即使设置了opacity: 1 也是在原来0.6的基础上实现的透明，所以想要解决这个问题，需要改变思路！ background: rgba(24, 23, 23, 0.5); 去实现透明度，就不会被继承 方法2： 设置opacity: 的时候，单独给他弄个div，让他定位也可以，不要让他有子元素 ...
CSS隐藏元素技法大比拼：display, visibility与opacity技巧
另一种较为奇特的方法是调整盒模型属性，如`height`和`width`设置为0，同时配合`overflow: hidden`来隐藏元素内容和子元素。这种方法在实际应用中可能不常见，但它展示了CSS的灵活性和高级技巧。 总结起来，选择哪...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值