0

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

我该如何解决这个问题？

4

4 回答 4

1

使用 RGBA。这是一个将转换为 RGBA的颜色转换器。

这是半透明的白色。

background-color: rgba(255, 255, 255, 0.5);
于 2013-08-16T05:30:18.707 回答
0

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

#bd {
    background-color: rgba(255, 255, 255, 0.7);
}
于 2013-08-16T05:30:21.737 回答
0

孩子继承不透明度。如果他们不这样做，那就有点奇怪了。您可以使用透明图像作为背景，或设置background-color使用. （a = 阿尔法）。BDRGBa

MDN 有一个很棒的部分rgba()。

像这样：

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

只是让您知道，很多时候您的问题之前已经被问过并且已经收到了一些很好的答案。进行快速搜索以确保尚未提出您的问题通常是个好主意。

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

于 2013-08-16T05:30:46.110 回答
0

有几个选项：

  1. 使用:before. 这允许使用图像（小提琴）：

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

  2. rgba对旧版 IE使用和渐变过滤器：

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

IE 渐变也使用十六进制表示 alpha。它是前 2 位数字。您可以在其他答案之一中使用十六进制到 rgb 转换器来计算它，方法是对其进行255 * opacity四舍五入，然后将其插入其中一种颜色。

于 2013-08-16T05:36:10.113 回答