javascript - 具有渐变背景的 CSS Z-Index

Question

我正在制作一个小网页，我希望带有一些文本的顶部横幅保留在顶部，例如:

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 工作正常，除了因为我在任何时候向下滚动时使用渐变，横幅后面的元素仍然可见，尽管有点透明。

有没有办法让他们完全隐形？即，我想要做的是让它好像横幅是纯色，即使它是渐变色。

在此先感谢您的帮助!

Answer 1

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

我最好的猜测是您正在使用 alpha 值来制作融入背景的漂亮渐变。但是据我了解，当其他元素落后时，您正在尝试将其作为实体......

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

我相信您正在尝试实现梯度以根据多个元素采取不同的行为。试着想想你真正想要完成的事情。但是，如果您决定让它对背后的一切都表现得像实体一样，那么只需将您的 alpha 值设置为 1.0 即可。

因此，如果您最初有:背景:-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+ */

改成:背景:-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+ */

如果你看，我将你所有的 alpha 设置为“1”，所以它将是 100% 实心的，相反我通过移动你的 rgb 值来改变亮度，所以你仍然有一个渐变，但这次是实心的.