如何在文本下應用另一個背景圖層

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>

來源

2017-02-17 floribon

只需添加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>

來源

2017-02-17 16:55:17 pol

就是這樣！我以爲我已經嘗試過z-index，但顯然我沒有，謝謝！ – floribon

你也可以嘗試多種背景。 – pol

感謝您指出，雖然我不能改變最初的CSS，只是在它上面添加新的規則（並且我不知道原始背景顏色）。但是這可能有助於提高社會地位 – floribon

使用僞元素定義兩個背景，並把它們帶負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>

來源

2017-02-17 16:44:02

謝謝，我可能最終會接受這個答案，但這個需要我使用JS來「移動」bac首先每個元素的kground（我最初沒有控制元素）。我所擁有的只是一個添加到元素中的類，所以理想情況下新的CSS規則就足夠了。 – floribon

@floribon爲什麼你不得不使用JS，難道你不能只寫一個覆蓋當前樣式的CSS嗎？ –

在你的答案中，你將元素的背景屬性移動到它的'：after'僞類，這是需要js的。 – floribon

您可以使用多個後臺用逗號分隔。或者，您可以在z-index: -1的父元素後面發送僞元素（僅在父元素沒有聲明的z-index時纔有效）。

來源

2017-02-17 16:45:05

是的，你只需要亂搞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

來源

2017-02-17 16:47:56 Alsh

感謝您的回答，但我想再次找到一種方法，只需將CSS添加到目標元素，而無需添加新元素等。 – floribon

你這樣做絕對心病只需要添加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>

來源

2017-02-17 16:54:43

謝謝，這是正確的答案！您與其他人同時發佈了它，並且我扔了一枚硬幣以接受一個 – floribon

如何在文本下應用另一個背景圖層

回答

相關問題