Div不透明下降到内部文本？

Question

我有一个奇怪的问题，因为我正在尝试遵循模型的设计。我想弄清楚为什么下面的文字看起来不是白色的。它位于不透明的div内。

使用Inspect Element我已经验证了里面的文本没有继承div的不透明度，并且它的颜色设置为白色。那为什么它对我来说看起来很灰暗？如何将其更改为看起来白色（因为它显然是白色）？

这是“不确定如何开始？”的Inspect Element结果。文本：

element {
}
div.not-sure-inside h3 {
    margin-top: 25px;
}
div.not-sure-inside h3, div.not-sure-inside p {
    margin-left: 10px;
}
div.not-sure-inside a, div.not-sure-inside h3, div.not-sure-inside p {
    color: #FFF;
}
H3 {
    color: #0078AE;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 18px;
    font-weight: bold;
}
BODY {
    font-family: Arial,Helvetica,sans-serif;
    color: #000;
    font-size: 13px;
}

对于包含它的div：

element {
}
div.not-sure-inside {
    float: left;
    width: 205px;
    height: 100%;
    background-color: #FDB913;
    opacity: 0.8;
    margin: 0px;
}
BODY {
    font-family: Arial,Helvetica,sans-serif;
    color: #000;
    font-size: 13px;
}

这是模型设计（任何知道如何在右边制作三角形的人都可获得奖励积分）：

Answer 1

除了给整个div（包括文本）提供较低的不透明度外，您可以使用rgba值将背景设置为透明，例如：

div.not-sure-inside {
    float: left;
    width: 205px;
    height: 100%;
    background-color: rgba(253, 185, 19, .8);
    opacity: 0.8;
    margin: 0px;
}

RGB“253,185,19”=＃FDB913

“.8”的A =不透明度：.8

Answer 2

试试这个

div.not-sure-inside {
    float: left;
    width: 205px;
    height: 100%;
    background-color: rgba(253, 183, 18, .8);
    margin: 0px;
}