如何在文本下应用另一个背景层

Question

CSS社区，如果问这个问题，我很乐意关闭它。

这是一个问题：您有一个带有背景的元素，并希望在第一个元素上添加另一个背景，例如，具有一定的透明度。该元素的文本是静态的，应显示在背景上的"上方"。

只有使用CSS 才能做任何方法？我知道我可以动态添加其他元素等，但是我正在寻找一种仅使用样式规则来执行此操作的方法。

请运行这个片段以查看我的想法。理想情况下，我将有办法将这种:before样式放在我的文本和自己的背景之间。

div {
  padding: 20px;
  background: #c8e289;
  position: relative;
}
div:before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  top: 0;
  right: 50%;
  width: 50%;
  height: 100%;
}

<div>Text Barely Visible</div>

Answer 1

使用伪元素定义两个背景，然后将它们放在父母的范围内，带有负z indexes。

div {
  padding: 20px;
  position: relative;
}
div:before, div:after {
  position: absolute;
  content: '';
}
div:after {
  background: #c8e289;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -2;
}
div:before {
  background: rgba(255, 255, 255, 0.6);
  top: 0;
  right: 50%;
  width: 50%;
  height: 100%;
  z-index: -1;
}

<div>Text Barely Visible</div>

Answer 2

是的，您只需要弄乱z index！

您可以将父容器设置为位置：相对；z index：1。例如。

然后，您有一个孩子，它将充当其他背景，绝对将其定位为2。

。

然后，最后，您的文本包裹在其自己的标签中，例如p标签，将其定位为相对的，z索引为3。

这是一个代码示例：

<div class="parent-bg">
    <div class="parent-bg__child-bg"></div>
    <p class="parent-bg__child-text">Text</p>
</div>
.parent-bg {
    background-color: red;
    position: relative;
    z-index: 1;
    width: 20rem;
    height: 20rem;
}
.parent-bg__child-bg {
    background-color: rgba(255, 255, 255, .6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}
.parent-bg__child-text {
   position: relative;
   z-index: 3;
   color: black;
}

这是笔http://codepen.io/anon/pen/ggjloa

Answer 3

只需将 z-index: 0添加到元素，然后将 z-index: -1添加到伪元素。

div {
  padding: 20px;
  background: #c8e289;
  position: relative;
  z-index: 0;
}
div::before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  top: 0;
  right: 50%;
  width: 50%;
  height: 100%;
  z-index: -1;
}

<div>Text Barely Visible</div>

---

，也可以走多背景路线：

div {
  padding: 20px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.6) 50%, transparent 50%), #c8e289;
  position: relative;
}

<div>Text Barely Visible</div>

Answer 4

您做到了绝对正确的唯一正确的事情，您需要添加z index;

div {
  padding: 20px;
  background: #c8e289;
  position: relative;
  z-index: -2;
}
div:before {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.6);
  top: 0;
  right: 50%;
  width: 50%;
  height: 100%;
  z-index: -2;
}

<div>text is visible here</div>

Answer 5

您可以使用逗号分开使用多个背景。或者，您可以使用z-index: -1在父元素后面发送假元（仅当父元素没有声明为z index时起作用）。