我有一个奇怪的问题,因为我正在尝试遵循模型的设计。我想弄清楚为什么下面的文字看起来不是白色的。它位于不透明的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;
}
这是模型设计(任何知道如何在右边制作三角形的人都可获得奖励积分):
答案 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;
}