Question

的完整示例

如果链接无效：

HTML

<header>
    <div class="g1">
    </div>
    <div class="container" style="color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column">
        <div class="fs30 tupcase tcenter">NO GRADIENT TEXT</div>
        <div class="fs52 tupcase tcenter">PARTIAL GRADIENT</div>
        <div class="fs20 tcenter" style="margin-top:20px">GRADIENT</div>
    </div>
</header>

CSS

.g1{
    position: absolute;
    top:250px;
    min-width:1000px;
    width:100%;
    height:250px;
    margin:0 auto;
    background: -moz-radial-gradient(top, ellipse, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 50%);
    background: -webkit-radial-gradient(top, ellipse, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 50%);
    background: -o-radial-gradient(top, ellipse, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 50%);
    background: -ms-radial-gradient(top, ellipse, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 50%);
    background: radial-gradient(ellipse at top, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 50%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=1);
}
.container{width:1000px;height:100%;margin:0 auto}
.tupcase{text-transform:uppercase}
.tcenter{text-align:center}
.fs52{font-size:52px}
.fs30{font-size:30px}
.fs20{font-size:20px}
body,html{margin:0;padding:0;width:100%;min-width:1000px;min-height:100%}
header{height:500px;background:#0af}

我无法理解为什么渐变会溢出文字使其变暗。在另一个div中，它看起来非常非常错误。见于Chrome 42和Firefox 38。

Answer 1

在＆＃39; .container＆＃39;中添加position:relative;z-index:9;类

.container {位置：相对; z索引：9;}

http://jsfiddle.net/544jdsnr/4/

Answer 2

我将z-index规则添加到您的.fs类：

.fs52 {
  font-size: 52px;
  z-index: 1;
}

这会将您的文字放在其他所有内容上

Answer 3

恕我直言，可以用一个容器来完成：

＆＃13;

.container{
	background: -moz-radial-gradient(top, ellipse, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 50%);
	background: -webkit-radial-gradient(top, ellipse, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%);
	background: -o-radial-gradient(top, ellipse, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%);
	background: -ms-radial-gradient(top, ellipse, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%);
	background: radial-gradient(ellipse at top, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0) 50%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000',GradientType=1);
}
.width100{width:100%}
html,body {height:100%;}
.container{width:1000px;height:100%;margin:0 auto}
.tupcase{text-transform:uppercase}
.tcenter{text-align:center}
.fs52{font-size:52px}
.fs30{font-size:30px}
.fs20{font-size:20px}
body,html{margin:0;padding:0;width:100%;min-width:1000px;min-height:100%}
header{height:500px;background:#0af}

＆＃13;

<header>
	<div class="container" style="color:#fff;display:flex;justify-content:center;align-items:center;flex-direction:column">
		<div class="fs30 tupcase tcenter">NO GRADIENT TEXT</div>
		<div class="fs52 tupcase tcenter">PARTIAL GRADIENT</div>
		<div class="fs20 tcenter" style="margin-top:20px">GRADIENT</div>
	</div>
</header>

＆＃13;

http://jsfiddle.net/544jdsnr/5/

Answer 4

关于在文本div上设置正z-index的简单答案的解释如下：

  .fs52 {
    font-size: 52px;
    z-index: 1;
  }

是容器div上的display属性。由于容器div的显示属性为“ flex ”，子元素显示为“ box ”，对于定位为框的元素，z-index属性指定堆栈当前堆叠上下文中框的级别。就像定位元素一样，其值为“绝对”，“相对”和“已修复”

因此，将文本层放在前面的最简单方法是设置它的z-index。由于页面上的所有其他元素都没有z-index集，因此它们将在默认渲染层0上呈现，它们指的是

的默认堆叠顺序

后代定位元素，按外观顺序和

正常流程中的后代阻塞，按出现的顺序。

由于正常流程中没有位置属性的标准块元素总是在定位元素之前呈现它们出现在定位元素下方，即使它们后来出现在HTML文档中。

这就是为什么渐变div位于所有其他元素之上的原因，因为即使在渐变div元素上没有设置z-index，它也具有绝对位置。所以在文本div上设置z-index 将指定不同的堆叠顺序。正值使前面的元素在您指定的图层上使用z-index的值进行渲染。

负值也可以在元素下面的图层上呈现元素，这些元素位于具有更大z-index值的图层上，或者是在图层0上的默认堆叠顺序上的元素。

Answer 5

正如文档所述，z-index仅适用于定位元素（position:absolute，position:relative或position:fixed）。

为了实现我的目标，我必须将position:relative放在.container课程中，然后才能让z-index工作：

.containter {
    ...
    position:relative;
    z-index:1;
}

或者我可以直接干涉.container孩子，如下：

.fs52 {
    font-size: 52px;
    z-index: 1;
}

但是这种方法并不好，因为它会降低代码的可读性。

背景渐变溢出文本，但它不应该

5 个答案: