CSS Z-Index与渐变背景 [英] CSS Z-Index with Gradient Background

问题描述

我正在制作一个小网页，其中我想顶部的横幅与一些文本保持在顶部，如：

I'm making a small webpage where the I would like the top banner with some text to remain on top, as such:

HTML：

<div id = "topBanner">

    <h1>Some Text</h1>

</div>

CSS：

#topBanner{
    position:fixed;

    background-color: #CCCCCC;
    width: 100%;
    height:200px;

    top:0;
    left:0;

    z-index:900;

    background: -moz-linear-gradient(top,  rgba(204,204,204,0.65) 0%, rgba(204,204,204,0.44) 32%, rgba(204,204,204,0.12) 82%, rgba(204,204,204,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,0.65)), color-stop(32%,rgba(204,204,204,0.44)), color-stop(82%,rgba(204,204,204,0.12)), color-stop(100%,rgba(204,204,204,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(204,204,204,0.65) 0%,rgba(204,204,204,0.44) 32%,rgba(204,204,204,0.12) 82%,rgba(204,204,204,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6cccccc', endColorstr='#00cccccc',GradientType=0 ); /* IE6-9 */


}
/*WebPage Header*/
h1{
    font-size:3em;
    color:blue;
    text-shadow:#CCCCCC 2px 2px 2px, #000 0 -1px 2px;

    position: absolute;
    width: 570px;

    left:50%;
    right:50%;
    line-height:20px;

    margin-left: -285px;

    z-index:999;
}

z-index工作正常，除了因为我使用渐变任何时候我向下滚动横幅后面的元素仍然可见，虽然有点透明。

The z-index works fine, except that because I'm using a gradient any time I scroll down the elements behind the banner are still visible, albeit somewhat transparent.

有没有办法使它们完全不可见？即，我想要做的是让 横幅是一个纯色，即使它是一个渐变。

Is there any way to make them total invisible? i.e., what I'm trying to do is make it as though the banner is a solid color, even though it's a gradient.

谢谢

推荐答案

这里有一个有趣的概念问题。

Here you have an interesting conceptual problem.

我最好的猜测是，你使用alpha值，使一个漂亮的渐变解析到背景。但是根据我的理解，你正在尝试它也是一个坚实的，当其他元素后面...

My best guess is that you are using alpha values to make a nice gradient disolving into the background. But for what I understand, you are trying it to also be as a solid when other elements are behind...

                                 
+---------------+               
| background    |  <---gradient to this             
|               |               
|    +----------+-----+         
|    | other elements |  <---solid to this       
|    |                |         
|    |                |         
|    |   +------------+-------+ 
|    |   | gradient           | 
|    |   |                    | 
+----+   |                    | 
     |   |                    | 
     |   |                    | 
     |   |                    | 
     +---+                    | 
         |                    | 
         |                    | 
         +--------------------+ 

我相信你正试图实现你的渐变，根据几个元素不同的行为。
尝试想想你真正想要完成什么。但是如果你决定让它对它背后的一切都是坚实的，那么只需将你的alpha值设置为1.0的值。

I believe that you are trying to achieve your gradient to act differently according to several elements. Try to think what you would really like to accomplish. But if you decide to have it act as solid to everything behind it, then just put your alpha values to a 1.0 value.

所以如果你原来：
背景：-moz-线性梯度（顶部，rgba（204,204,204,0.65）0％，rgba（204,204,204,0.44）32％，rgba（204,204,204,0.12）82％，rgba（204,204,204,0）100％ / * FF3.6 + * /

So if you have originally: background: -moz-linear-gradient(top, rgba(204,204,204,0.65) 0%, rgba(204,204,204,0.44) 32%, rgba(204,204,204,0.12) 82%, rgba(204,204,204,0) 100%); /* FF3.6+ */

更改为：
background：-moz-linear-gradient（top，rgba（54,54,54， 1）0％，rgba（104,104,104,1）32％，rgba（154,154,154,1）82％，rgba（204,204,204,1）100％）; / * FF3.6 + * /

Change it into: background: -moz-linear-gradient(top, rgba(54,54,54,1) 0%, rgba(104,104,104,1) 32%, rgba(154,154,154,1) 82%, rgba(204,204,204,1) 100%); /* FF3.6+ */

如果你看，我将所有的alphas1，所以它将是100％固体，通过移动你的rgb值让你仍然有一个渐变，但这一次是一个坚实的亮度。

If you look, I am making all your alphas "1", so it will be 100% solid, and instead I am changing the brightness by moving your rgb values so you still have a gradient, but this time a solid one.

这篇关于CSS Z-Index与渐变背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！