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

下面是完整的示例代码:http://jsfiddle.net/544jdsnr/

如果链接无效:

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}

我不明白为什么渐变溢出文本使其变暗。在另一个分区，这看起来是非常非常错误的行为。Chrome 42和Firefox 38

添加position:relative;z-index:9;。容器的类

.container{:相对;z - index: 9;}

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

我会添加z-index规则到您的.fs类:

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

这将把你的文本放在其他所有内容的顶部

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

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

是容器div上的显示属性。因为你的容器div有一个显示属性"flex"，子元素显示为"box"，对于定位为box的元素，z-index属性指定当前堆叠上下文中box的堆栈级别。就像定位元素的值为"绝对"， "相对"one_answers"固定"

把文本图层放在前面最简单的方法就是设置它的z-index。由于页面上的所有其他元素都没有z索引集，因此它们在默认渲染层0上呈现。它们指的是默认的堆叠顺序，这意味着对于

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

子块在正常流中，按出现顺序

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

这就是为什么你的渐变div是在所有其他元素的顶部，因为它有一个绝对位置，即使没有在渐变div元素上设置z-index。在文本div上设置z-index将指定不同的堆叠顺序。如果为正值，则该元素将在您指定的z-index值的图层上呈现。

负值也可以用于渲染位于具有较大z-index值的图层上的元素下面的图层上的元素，或者位于第0层上的默认堆叠顺序的元素。

我认为这可以用一个容器来完成:

.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}

<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>

http://jsfiddle.net/544jdsnr/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;
}

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

相关内容

最新更新

热门标签：