1. 前言

1. 父节点设置 opacity,子节点设置 opacity无效的解决方案
2. 这是最近在写vue + elementui 的一个项目中遇到的问题,稍微记录下
3. 很多基础知识还是不扎实呀

2. why 原因

1. 如果你发现父节点设置了 opacity，而子节点设置的 opacity 无效，可能是由于 CSS 中的透明度继承和层叠的机制导致的
2. 在 CSS 中，子元素的透明度会继承父元素的透明度，这可能导致子元素的透明度不如预期

3. 使用 RGBA 颜色解决

1. 替代使用 opacity，你可以使用 RGBA 颜色来设置父元素的透明度，而保持子元素的完全不透明。
2. 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 伪元素

1. 使用::before伪元素来创建一个覆盖整个父元素的子元素，
2. 然后设置::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

1. 如果浏览器支持，你可以使用 backdrop-filter 来实现毛玻璃效果，并保持子元素的不透明性

/* 父元素 */
.parent {
  backdrop-filter: blur(5px); /* 毛玻璃效果 */
}

/* 子元素 */
.child {
  background-color: red; /* 子元素的颜色 */
}

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉