如何避免子级内容字体不受父级opacity影响

如何避免内容被opacity影响？在不使用rgba的情况下
我在使用opacity时，自己字体的透明度也变化了。使用了layer.tips时，设置rgba想让背景变透明，设置无效，只能使用opacity，但是字体颜色也发生变化了，怎么解决？

应该是层级不够，这样写，写到你引入的layui.css的后面 否则不会覆盖上面的样式

.layui-layer-tips .layui-layer-content{background-color:rgba(0,0,0,.5)}

“mix-blend-mode”属性来解决这个问题。mix-blend-mode 属性可以让你设置一个元素的透明度，而不会影响其他元素。你可以在你要保护的元素上设置 mix-blend-mode:normal，就可以避免被 opacity 影响。

在不使用rgba的情况下，要避免内容被opacity影响，可以考虑使用CSS3中的其他属性，如background-color: rgba(255, 255, 255, 0.5) 可以替换为 background-color: #fff; filter: opacity(50%);。

如果您使用 opacity 属性来改变元素及其内容的不透明度，那么它会影响所有子元素。您可以尝试使用 CSS3 中的 rgba 函数来设置元素的背景颜色，这样只会影响背景颜色，不会影响元素内的文本。例如：

.element {
  background-color: rgba(255, 255, 255, 0.5);
}

如果您不想使用 rgba，则可以尝试使用 background-color 和 opacity 属性的组合，但是这可能会影响元素中的所有内容，包括文本和其他子元素。例如：

.element {
  background-color: #ffffff;
  opacity: 0.5;
}

如果您希望只影响元素的背景颜色，可以将元素分成两个层：一个是用于背景的 div，另一个是用于文本和其他内容的 div。将背景层设置为不透明度，将文本层放置在背景层上方。例如：

<div class="bg-layer"></div>
<div class="text-layer">Hello, world!</div>

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0.5;
  z-index: 1;
}

.text-layer {
  position: relative;
  z-index: 2;
}

这样，您可以将背景层设置为不透明度，而不会影响文本层中的任何文本或其他内容。