[英]CSS: Getting text to appear above the gradient in my div
我正在新聞匯總網站的主頁上工作,應該有幾個區域可以將背景圖片和頂部文本帶入內容,並在兩者之間形成漸變。 除了z-index較低之外,大部分情況下我都擁有它,但漸變仍然顯示在文本框上方。 為了確保這一點,我已經在堅實的背景下進行了實驗。 代碼和示例在這里: http : //jsfiddle.net/cx0uvshd/
<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>
將(position:relative)和(z-index: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; }
為什么不對.feature-bottom
應用漸變? 像這樣: http : //jsfiddle.net/cx0uvshd/2/
在當前版本中,盡管z-index
較大,但您仍具有:before
元素覆蓋。 您需要新的堆疊上下文
不太干凈的解決方案是添加另一個div,其內容低於漸變1。 然后給該div一個類,該類是feature-bottom的副本。 然后將特征底部的顏色設置為透明以隱藏文本。 同時更改最后兩個選擇器以使用復制類。 同時復制最后兩個選擇器以用於新類。 的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; }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.