Question

我想知道是否可以为div创建两个背景颜色并覆盖它们。

我想要一个白色的背景颜色，这样div下方的内容就不会透过，另一个rgba（）颜色涂在这个白色上，为每个脚本创建更浅的颜色。

Answer 1

如果不理解为什么要这样，可以使用纯色渐变来完成：fiddle。

body {
    background: linear-gradient(rgba(220,14,120,0.5), rgba(220,14,120,0.5)),
                linear-gradient(white, white); /* first bg is on top of this */

}

Answer 2

虽然Adrift's answer是要走的路，但你也可以使用伪元素。

body {
    background: white;
    position: relative;
}

body:before {
    content: "";
    position: absolute;
    top: 0;
    left; 0;
    width: 100%;
    height: 100%;
    background: rgba(220,14,120,0.5);
    z-index: 1;
}

/* Just to be sure, automatically set all elements to a higher z-index than the pseudo element */
body * {
    z-index: 2;
    position: relative;
}

这是fiddle。

但是，这不符合生产要求：

在不需要时设置相对于身体和所有其他元素的位置
在所有元素上设置不必要的z-index

这种方法唯一的优点是，它不使用渐变，从语义的角度来看，渐变更符合逻辑。

Answer 3

要回答你的问题，是的，有办法。您可以在同一个div上使用背景图像和背景颜色。 Check out this SOF post.

虽然我会考虑这样的不同方法：

结构：

<div class="parent">
    <div class="white"></div>
    <div class="color"></div>
</div>

CSS：

.parent {
    position: relative:
}
.white, .color {
    position:absolute;
    top: 0px;
    left: 0px;
}
.white {
    z-index: 9998;
}
.color {
    z-index: 9999;
}

您可以使用details here，但总的想法是您的图层将div放在彼此之上。具有较高z-index的div将位于顶部。相应地改变颜色。父div是相对的将保留该容器内的绝对div。

Answer 4

您无法为一个元素定义两种背景颜色，但您可以将一个彩色元素叠加在白色元素的顶部以获得混合效果，同时阻挡其下方的任何内容：

JSFiddle

HTML

<div class="one">
    <div class="two"></div>
</div>

CSS

div {
    width: 100px;
    height: 100px;
}

.one {
    background-color: #fff;
}
.two {
    top: 0;
    left: 0;
    background-color: rgba(0,0,255,0.2);
}

多个背景颜色层

4 个答案: