CSS：讓文字出現在我的div中的漸變上方

我正在製作一個新聞聚合網站的主頁，我們應該有幾個區域將內容與背景中的照片和頂部的文字兩者之間有一個梯度。大多數情況下，除了z-索引較低之外，我還有它，漸變仍然出現在文本框的上方。我已經在堅實的背景下對此進行了嘗試，以確保它的安全。代碼和例子在這裏：http://jsfiddle.net/cx0uvshd/CSS：讓文字出現在我的div中的漸變上方

<style type="text/css"> 
    .feature { 
     position: relative; 
     float: left; 
     width: 465px; 
     height: 170px; 
     margin-top: 24px; 
     margin-right: 30px; 
    } 
    .feature.last { 
     margin-right: 0; 
    } 
    .feature-bottom { 
     background: none; 
     position: absolute; 
     bottom: 0; 
     left: 0; 
     padding: 0 30px 6px; 
     width: 100%; 
     z-index: 200; 
     line-height: 1; 
    } 
    .feature-bottom::after { 
     content: ""; 
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 100%; 
     height: 100%; 
     z-index: 100; 
     background: rgba(0,0,0,0); 
     background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
     background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5))); 
     background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
     background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
     background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
     background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); 
    } 
    .feature-bottom h3 { 
     color: #FFF; 
     font-size: 15px; 
     font-weight: 400; 
     margin: 0; 
    } 
    .feature-bottom h2 { 
     color: #FFF; 
     font-size: 24px; 
     font-weight: 400; 
     margin: 0; 
    } 
</style>

來源

2015-04-06 Adam Bell

添加（位置：相對）和（Z-指數：201）的功能褲H3和H2。請看下面修改後的代碼：

.feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; } 
.feature.last { margin-right: 0; } 
.feature-bottom { 
    background: none; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    padding: 0 30px 6px; 
    width: 100%; 
    z-index: 200; 
    line-height: 1; 
} 
.feature-bottom::after { 
    content: ""; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 100; 
    background: rgba(0,0,0,0); 
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5))); 
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
    background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
    background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); 
} 
.feature-bottom h3 { position:relative; z-index:201; color: #FFF; font-size: 15px; font-weight: 400; margin: 0; } 
.feature-bottom h2 { position:relative; z-index:201; color: #FFF; font-size: 24px; font-weight: 400; margin: 0; }

來源

2015-04-06 02:21:54

贏家！這很好。非常感謝您的幫助。 – 2015-04-06 20:40:46

爲什麼不實行梯度.feature-bottom？像這樣： http://jsfiddle.net/cx0uvshd/2/

在當前版本中，:before元素覆蓋儘管大於z-index。您需要new stacking context

Here's a similar question

來源

2015-04-06 02:28:16 knitevision

一個不那麼幹淨的解決辦法是增加另一個DIV與下面的梯度一個內容。然後給這個div一個功能底部副本的類。然後將特徵底部的顏色設置爲透明以隱藏文本。還要更改最後兩個選擇器以使用複製類。也複製最後兩個選擇器用於新類。 JsFiddle

CSS：

 
    .feature { position: relative; float: left; width: 465px; height: 170px; margin-top: 24px; margin-right: 30px; } 
    .feature.last { margin-right: 0; } 

/*Copy of feature bottom*/ 
.feature-bottom2 { 
background: none; 
position: absolute; 
bottom: 0; 
left: 0; 
padding: 0 30px 6px; 
width: 100%; 
z-index: 200; 
line-height: 1; 
} 
.feature-bottom { 
    color: transparent; 
background: none; 
position: absolute; 
bottom: 0; 
left: 0; 
padding: 0 30px 6px; 
width: 100%; 
z-index: 200; 
line-height: 1; 
} 
.feature-bottom::after { 
content: ""; 
position: absolute; 
bottom: 0px; 
left: 0px; 
width: 100%; 
height: 100%; 
z-index: 100; 
background: rgba(0,0,0,0); 
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,0.5)), color-stop(100%, rgba(0,0,0,0.5))); 
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=0); 
} 
/* Copy of below*/ 
.feature-bottom2 h3 { color: #FFF; font-size: 15px; font- weight: 400; margin: 0; } 
.feature-bottom2 h2 { color: #FFF; font-size: 24px; font-weight: 400; margin: 0; } 

.feature-bottom h3 { font-size: 15px; font-weight: 400; margin: 0; } 
.feature-bottom h2 { font-size: 24px; font-weight: 400; margin: 0; }

來源

2015-04-06 02:39:20

CSS：讓文字出現在我的div中的漸變上方

回答

相關問題