多个背景颜色层答案

【问题标题】：Multiple background-color layers多个背景颜色层
【发布时间】：2015-04-19 22:51:18
【问题描述】：

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

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

【问题讨论】：

为什么不立即选择正确的颜色呢？据我所知，您只能堆叠背景图像，而不是颜色。
因为我需要从我的初始颜色生成很多不同的光色...
无论如何，您都需要创建/插入不同的半透明颜色......这相当于工作。
不，不是！相信我:)

标签： css background-image background-color

【解决方案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 */

}

【讨论】：

@BramVanroy：谢谢——这也很好，因为所有其他背景属性都适用。
我仍然不明白为什么 OP 需要这个，为什么不立即选择正确的 HEX 颜色？
因为选择单一的 rgba 颜色将允许父级的背景显示出来。 OP 想要一种单一的背景颜色来消除不透明度，然后在干净的“画布”上使用 rgba 颜色。
底层可能只是一个背景色。您只需要对其他图层使用渐变技巧。

【解决方案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。

但是，这对生产不友好：

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

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

【讨论】：

【解决方案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 保留在该容器内。

【讨论】：

【解决方案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);
}

【讨论】：