Question

我有类似的设计（只是设计）http://jsfiddle.net/eoL458o0/1/我需要在.content的顶部放置文字，因为anchor现在无法点击。 #gradient是固定的，因为背景图像也是固定的，#empty具有绝对位置，因为我需要覆盖整个身体，它必须是可滚动的，有jQuery动态设置高度。

感谢您的帮助。

#empty {
    background-color: rgba(99,115,99,0.25);
    margin-top: 200px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#gradient {
background: rgba(255,255,255,0);
background: -moz-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: -webkit-gradient(radial, 50% 65% 50% 65%, 0px, 50% 65% 50% 65%, 100%, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,0.50)));
background: -webkit-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: -o-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: -ms-radial-gradient(50% 65%, ellipse cover, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
background: radial-gradient(ellipse at 50% 65%, rgba(255,255,255,0) 0%, rgba(0,0,0,0.50) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000000', GradientType=1 );

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;

}

.content {
    color: #000; 
    margin-top: 200px;
}

<div class="container content" role="main">
	<div class="row">
	    <p class="col-md-6">
            Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing</a> elit.
	    </p>
    </div>
</div> <!-- /container -->
<div id="gradient"></div>
<div id="empty"></div>

Answer 1

在你的CSS中，只需添加：

z-index:-1;

到那两个div，所以他们走到底部

固定和绝对定位div下的文本

1 个答案: