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

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-index 的父级后面。

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>