1. 前言
- 父节点设置 opacity,子节点设置 opacity无效的解决方案
- 这是最近在写vue + elementui 的一个项目中遇到的问题,稍微记录下
- 很多基础知识还是不扎实呀
2. why 原因
- 如果你发现
父节点设置了 opacity，而子节点设置的 opacity 无效，可能是由于 CSS 中的透明度继承和层叠的机制导致的
- 在 CSS 中，子元素的
透明度会继承父元素的透明度，这可能导致子元素的透明度不如预期
3. 使用 RGBA 颜色解决
- 替代使用 opacity，你可以使用 RGBA 颜色来设置父元素的透明度，而保持子元素的完全不透明。
- RGBA 中的 A 表示 alpha 通道，可以用来设置透明度
/* 父元素 */
.parent {
background-color: rgba(255, 0, 0, 0.5); /* 50% 透明度的红色 */
}
/* 子元素 */
.child {
background-color: rgba(0, 255, 0, 1); /* 完全不透明的绿色 */
}
4. 使用 background-color 和 ::before 伪元素
- 使用
::before伪元素来创建一个覆盖整个父元素的子元素，
- 然后设置
::before 的透明度。这样可以保持子元素的不透明性。
/* 父元素 */
.parent {
position: relative;
}
/* 子元素 */
.child::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: red; /* 子元素的颜色 */
opacity: 0.5; /* 子元素的透明度 */
}
5. 使用 backdrop-filter
- 如果浏览器支持，你可以使用
backdrop-filter 来实现毛玻璃效果，并保持子元素的不透明性
/* 父元素 */
.parent {
backdrop-filter: blur(5px); /* 毛玻璃效果 */
}
/* 子元素 */
.child {
background-color: red; /* 子元素的颜色 */
}
参考资料
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
