Question

我已将class-hero-contact-us和opacity = 0.3的背景图像应用于div。我无法弄清楚为什么将不透明属性应用于具有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;
}

Answer 1

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

进行拉伸

Answer 2

父元素中定义的所有CSS都将应用于其中的所有内容。这意味着您不能使子元素的透明度比父元素的透明度低，而无需进行任何欺骗。如何做一些骗术？请查看此链接。

how to cancel opacity for a child element?

为什么应用于父元素的不透明属性会影响其子元素？

2 个答案: