Question

我有2个div（外部一个id =“BD”）（内部一个id =“内容”）。我试图让我的BD的背景颜色不那么透明，但我的内容中的所有内容都变得不那么透明，图像和文本。

我该如何解决这个问题？

Answer 1

使用RGBA。这是一个color converter，它将转换为RGBA。

这是半透明的白色。

background-color: rgba(255, 255, 255, 0.5);

Answer 2

将rgb组件替换为您选择的值。

#bd {
    background-color: rgba(255, 255, 255, 0.7);
}

Answer 3

儿童继承不透明。如果他们不这样做，那就太奇怪了。您可以为背景使用透明图片，或使用background-color设置BD RGBa。（a = alpha）。

MDN has a great section on rgba()

像这样：

#BD {
    background-color: rgba(0, 0, 0, 0.7);
}

正如你所知道的那样，很多时候你的问题会被问到，并且已经收到了一些很好的答案。通常最好快速搜索以确保您的问题尚未被提出。

例如，快速搜索此主题会产生this，this，this和this。

Answer 4

有几种选择：

使用:before。这允许使用图像（fiddle）：

#BD {
    position: relative;
}
#BD:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url(http://placehold.it/300);
    opacity: .7;
}

对旧的IE版本使用rgba和渐变过滤器：

#BD {
    background: rgba(0,0,0,.7);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf000000', endColorstr='#bf000000');
}

IE渐变也使用十六进制来表示alpha。它是前2位数。您可以在其他一个答案中使用hex to rgb转换器，通过执行255 * opacity，将其四舍五入并将其插入其中一种颜色来计算出来。

如何在不影响其中的内容的情况下使我的背景不透明度为0.7？

4 个答案: