反应原生父 opacity 不影响文本 - JavaScript

在 web 开发中，我们经常需要使用 CSS 的 opacity 属性来实现元素的透明效果。不过，当一个元素设置了 opacity 后，它的所有子元素也会继承这个 opacity，这可能会影响到子元素的可见性。在这种情况下，我们可以使用 JavaScript 来避免影响子元素的可见性。

解决方法

1. 为父元素添加一个 position: relative; 的样式。

2. 为父元素添加一个与其大小相等的子元素，并将其设置为 position: absolute;。

3. 将子元素的 opacity 设置为 1。

4. 将父元素的 opacity 设置为需要的值。

代码实现如下：

<style>
  .parent {
    position: relative;
    opacity: 0.5;
  }
  .child {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
  }
</style>
<div class="parent">
  <div class="child">
    <!-- 这里是子元素的内容 -->
  </div>
</div>

这样，就可以实现只有父元素透明度改变，而不影响子元素的显示效果了。

注意事项

1. 如果父元素使用 display: inline-block;，则需要设置其 vertical-align: top; 或 vertical-align: middle; 等样式，否则可能会出现子元素被垂直居中对齐的问题。

2. 如果需要在 JavaScript 中动态地改变父元素的 opacity，需要先获取到子元素，并将其设置为不透明（即 opacity 为 1），否则子元素的可见性可能会受到影响。

结论

使用 JavaScript 可以很好地避免子元素受到父元素 opacity 属性影响的问题，让页面的显示效果更加完美。