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索引的父元素后面。

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！

您可以将父容器设置为position：relative; z-index：1。例如。

然后，你有一个孩子将作为另一个背景，绝对定位这个z-index为2.

然后最后，你的文本包含在它自己的标签中，例如p标签，将它相对于z-index为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;

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 4

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

＆＃13;

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

＆＃13;

<div>Text Barely Visible</div>

＆＃13;

或者你可以选择多背景路线：

＆＃13;

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

＆＃13;

<div>Text Barely Visible</div>

＆＃13;

Answer 5

您可以使用逗号分隔多个背景。或者您可以使用z-index: -1在父元素后面发送伪元素（仅当父元素没有声明的z-index时才有效）。

如何在文字

5 个答案: