为什么应用于影响其子元素的父元素的 opacity 属性？ [复制]答案

【问题标题】：Why opacity property which is applied to parent element affecting its child element? [duplicate]为什么应用于影响其子元素的父元素的 opacity 属性？ [复制]
【发布时间】：2020-07-31 01:30:42
【问题描述】：

我已将 background-image 应用于 class="hero-contact-us" 和 opacity=0.3 的 div。我无法弄清楚为什么 opacity 属性应用于 class="hero-contact-us-text" 的子元素。非常感谢您的帮助。

<div class="hero-contact-us">
    <div class="hero-contact-us-text">Some text here</div>
</div>

这里是 CSS

.hero-contact-us
{
    background-image: url('media/pexels-ruslan-burlaka-140945.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.3;
    position: relative;
}

.hero-contact-us-text
{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:#173348;
    font-size: 1.5em;
    z-index: 99;
    opacity: 1;
}

【问题讨论】：

因为hero-contact-us 是父母。

标签： javascript html css frontend

【解决方案1】：

这是因为.hero-contact-u-text 在.hero-contact-us 内。无论您的父级 css 样式如何，它都会影响其子元素。您可以做的是删除父级中的背景样式并在.hero-contact-us 内创建另一个div，仅用于背景图像。您可以设置div 的背景图像和不透明度，也可以使用position: absolute; top: 0; left: 0; width: 100%; height: 100% 将其拉伸

【讨论】：

【解决方案2】：

父元素中定义的所有 CSS 都将应用于其中的所有内容。这意味着如果没有一些技巧，您不能使子元素的透明度低于父元素。如何制造一些诡计？请查看此链接。

how to cancel opacity for a child element?

【讨论】：