如何使文本等元素出現在堆疊背景之上？

我有一個網站，其中包含修復背景圖像和包含透明徑向漸變層的div類的正文。如何讓課堂中的元素不透明並出現在背景漸變和背景圖片的頂部？如何使文本等元素出現在堆疊背景之上？

CSS：

$body-color1: #f2009f; 
$body-color2: #218bdb; 

// Solution 1. However, unable too get content on top of gradient and backgourn image 
html { min-height:100%; } /* to get the gradient to stetch to the bottom of the view port */ 
body { 

    background: $body-color2; 
    background: url('http://i.huffpost.com/gen/964776/thumbs/o-CATS-KILL-BILLIONS-facebook.jpg') no-repeat center center fixed; 
    background-attachment: fixed; 
    // background-size: cover; 

} 

.bg-img { 
    background: -moz-radial-gradient(center, ellipse cover, $body-color1 0%, $body-color2 100%); /* FF3.6+ */ 
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0 $body-color1), color-stop(100%,$body-color2)); /* Chrome,Safari4+ */ 
background: -webkit-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* Opera 12+ */ 
background: -ms-radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* IE10+ */ 
background: radial-gradient(center, ellipse cover, $body-color1 0%,$body-color2 100%); /* W3C */ 
    opacity: 0.5; 
    z-index: 0; 
}

HTML：

<div class="bg-img">Insert large body of text here or elements.</div>

http://codepen.io/anon/pen/NPeqMJ

來源

2015-03-19 Neophyte Code Ninja

刪除opacity _「如何讓類內的元素不透明「_ - 不使用」不透明「 - 不透明對元素包括其所有元素起作用內容。 – CBroe 2015-03-19 05:24:24

如果我這樣做，我將失去圖像頂部的透明漸變。圖像將被覆蓋。有沒有一種方法，我仍然可以在圖像頂部具有透明漸變效果，同時具有不透明元素？ – 2015-03-19 05:39:59

漸變也應該使用'rgba'的顏色。 – CBroe 2015-03-19 05:41:33

更改車身顏色到：

$body-color1: rgba(242, 0, 159, 0.5); 
$body-color2: rgba(33, 139, 219, 0.5);

和.bg-img

Demo

來源

2015-03-19 05:55:53

哇，非常感謝Jon P！這是我正在尋找的答案！ – 2015-03-19 06:01:26

的頂部putthe元素，你可以使用z-index屬性。確保該值足夠大，以preventother元素來在頂部

z-index: 99999;

來源

2015-03-19 05:43:13 Arun

這不會工作，因爲沒有「其他元素」 – 2015-03-19 05:50:35

我試着用不同的z-index向bg-img添加一個內部類。那也行不通。 – 2015-03-19 05:55:46

如何使文本等元素出現在堆疊背景之上？

回答

相關問題