多个背景色图层

Question

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

我想要一个白色的背景色，这样 div 下面的内容就不会发光，并且在这个白色上涂上另一种 rgba() 颜色，以便为每个脚本创建更浅的颜色。

Answer 1

回答你的问题，是有办法的。您可以在同一 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 2

如果不明白你为什么想要这个，可以使用纯色渐变来完成：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 3

您不能为一个元素定义两种背景色，但您可以将一种彩色元素叠加在白色元素之上以获得混合效果，同时遮挡下方的任何元素：

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

Answer 4

虽然是可行的方法，但您也可以为此使用伪元素。

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

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

多个背景色图层

Multiple background-color layers

css

background-image

background-color