div与背景颜色,半透明度和边框有不可见的边框?
问题描述:
我有一些div像这样:div与背景颜色,半透明度和边框有不可见的边框?
- 第二div有,高亮
- 第三div有类框架
- 第四div有两个,高亮和框架类。
为什么边界在第四种情况下消失?
http://jsfiddle.net/ycyrwgcz/3/
HTML
<table>
<tr>
<td>
<div class="thumb"><div class="overlay"></div></div>
</td>
<td>
+
</td>
<td>
<div class="highlit thumb"><div class="overlay"></div></div>
</td>
<td>
+
</td>
<td>
<div class="framed thumb"><div class="overlay"></div></div>
</td>
<td>
=
</td>
<td>
<div class="highlit framed thumb"><div class="overlay"></div></div>
</td>
</tr>
</table>
与CSS
body
{
background-color: #ff8888;
}
.thumb
{
width: 40px;
height: 40px;
display: inline-block;
margin: 10px;
background-color: #8888ff;
}
.overlay
{
height: 100%;
}
.thumb.framed .overlay
{
border: 2px solid #fff;
box-sizing: border-box;
}
.thumb.highlit .overlay
{
background-color: #fff;
opacity: 0.4;
}
答
这些都是你的CSS规则:
.thumb.highlit .overlay {
background-color: #FFF;
opacity: 0.4;
}
.thumb.framed .overlay {
box-sizing: border-box;
border: 2px solid #FFF;
}
现在,对于第4个<div>
上述两种风格混淆起来。意思是,有background-color: #fff
以及border: 2px solid #fff
。
正如你所看到的,这些都是白色的。正因为如此,你无法区分边界。
尝试更改上述任何一个规则的color
,您将获得解决方案。
希望这会有所帮助。 :)
答
试试这个:
body
{
background-color: #ff8888;
}
.thumb
{
width: 40px;
height: 40px;
display: inline-block;
margin: 10px;
background-color: #8888ff;
}
.overlay
{
height: 100%;
}
.thumb.framed
{
border: 2px solid #fff;
box-sizing: border-box;
}
.thumb.framed .overlay
{
box-sizing: border-box;
}
.thumb.highlit .overlay
{
background-color: #fff;
opacity: 0.4;
}
答
因为background-color
和border-color
是相同的(#fff
)在第四个div。
您正在使用.overlay
类有以下几点:
.thumb.highlit .overlay {
background-color: #fff;
opacity: 0.4;
}
.thumb.framed .overlay {
border: 2px solid #fff;
box-sizing: border-box;
}
答
你要这个,应该是自我解释;)
.thumb.highlit .overlay {
background-color: rgba(255,255,255,0.4);
}
答
它不消失 - 只是在混合与覆盖层的其余部分相同,因为您已将其设置为不透明,则会变成紫色。如果你只想要的背景是不透明的,而不是整个覆盖,你将需要使用RGBA背景颜色:
.thumb.highlit .overlay
{
background-color: rgba(255,255,255,0.4);
}
但我看到绝对没有边界的! – 2014-09-05 11:04:10
你检查了上面的示例链接吗?最后一个框上有一个白色边框 – Pete 2014-09-05 11:10:13