在不透明的div中使子元素不透明

Question

我正在尝试使元素不透明，而<div>中的元素不透明。我尝试过简单地应用opacity: 1，但背景仍然显示在元素中。我还尝试将!important添加到属性中。 谢谢！

Answer 1

如果<div>有background-color

您可以使用background-color: rgba(red, green, blue, alpha)指定其背景颜色，而不是在opacity上使用<div>。只需将红色，绿色，蓝色和alpha替换为相应的值即可。

如果<div>有background-image

这是不可能的。但是一个解决方法是拥有2个<div>，一个超过另一个。较低的<div>将是非透明的，并具有背景。上方<div>会包含您的内容。使用z-index将div放在包含背景图像的div上方的内容中。

另一种解决方法是实际使用透明的PNG图像作为<div>的背景图像。

Answer 2

无法继承 opacity （强制，无法覆盖），如果您使用的父<div>使用背景图片，则必须将元素移到外面，也许使用绝对位置，将其定位在非不透明位置上。如果父<div>只有一个彩色背景，并且您使透明百分比变得容易！...您需要指定 RGBA 颜色背景（当然，不透明度为1）。< / p>

我推荐一种我认为有用的工具：http://hex2rgba.devoth.com/，这样您就可以正确计算rgba值。就是这样

Answer 3

如果您的父div只有背景颜色或背景图像，那么您可以执行以下操作：

HTML：

<div id="parent">
    <div id="child">
        <span>Hello World</span>
    </div>
</div>

CSS：

#parent{
    width: 100px;
    height: 100px;
    position: relative;
}

#parent:after{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 100%; 
    height: 100%;
    background: url('someimage.png') no-repeat 0 0 transparent;
    opacity: 0.7;
    z-index: -1;
}