Question

我有一些像这样的div：

enter image description here

第二个div有类highlit
第三个div有类框架
第四个div既有高光又有框架。

为什么边界在第四种情况下消失了？

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

Answer 1

这些是您拥有的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，您将获得解决方案。

希望这会有所帮助。：）

Answer 2

你想要这个，应该是自我解释;）

.thumb.highlit .overlay {
  background-color: rgba(255,255,255,0.4);
}

http://jsfiddle.net/fxxf6kcs/1/

Answer 3

它不会消失 - 只是与其他叠加层混合在一起，当你将它设置为不透明时，它会变成紫色。如果您只想让背景变得不透明而不是整个叠加层，则需要使用rgba背景颜色：

.thumb.highlit .overlay
{
    background-color: rgba(255,255,255,0.4);
}

Example

This should work back to ie 8

Answer 4

试试这个：

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

Answer 5

因为background-color和border-color在第四个div中相同（#fff）。
您正在使用具有以下内容的.overlay类：

.thumb.highlit .overlay {
    background-color: #fff;
    opacity: 0.4;
}
.thumb.framed .overlay {
    border: 2px solid #fff;
    box-sizing: border-box;
}

div与背景颜色，半透明度和边框有隐形边框？

5 个答案: