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

时间:2014-10-01 17:17:34

标签: html css

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

illusion?

使用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;
}

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

mockup

2 个答案:

答案 0 :(得分:3)

除了给整个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

答案 1 :(得分:1)

试试这个

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