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

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: 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 2

使用伪元素定义两个背景，并把它们带负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 3

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

Answer 4

是的，你只需要乱搞z-index！

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

然后，你有一个孩子将作为其他背景，在它自己的标签定位此绝对与2

的z-index于是最后，你的文本换行，如AP标签，位置它相对与3

这里的z-index是一个代码示例：

<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 5

你这样做绝对心病只需要添加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>