CSS：让文本显示在我的 div 中的渐变上方

Question

我正在处理一个新闻聚合网站的主页，我们应该有几个区域可以引入内容，其中照片在背景中，文本在顶部，两者之间有渐变。在大多数情况下，我有它，除了即使 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>

Answer 1

将 (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; }

Answer 2

为什么不对 .feature-bottom 应用渐变？像这样： http://jsfiddle.net/cx0uvshd/2/

在当前版本中，您有 :before 元素覆盖，尽管 z-index 更大。你需要new stacking context

Here's a similar question

Answer 3

一个不太干净的解决方案是添加另一个 div，其内容低于渐变。然后给 div 一个 class ，它是 feature-bottom 的副本。然后将功能底部的颜色设置为透明以隐藏文本。同时将最后两个选择器更改为使用副本 class。还要复制最后两个选择器以用于新的 class。 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; }

CSS：让文本显示在我的 div 中的渐变上方

CSS: Getting text to appear above the gradient in my div

html

css

background

z-index

gradient