渐变背景的 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（顶部，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（顶部，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 值来改变亮度，所以你仍然有一个渐变，但这次是一个实心的.

Answer 2

RGBA 指定不透明度级别，这会导致透明度（rgba(x,x,x,x) y% - y% 是不透明度）。如果您删除这些并创建没有指定不透明度的线性渐变，它应该保持实心。

更改为简单的 rgb 并删除 % 应该可以解决问题，但您可能需要相应地调整颜色，因为它们不再具有该不透明度级别。

Gradients

Answer 3

您的渐变必须使用十六进制（或 rgb）颜色，而您的身体必须使用底部渐变颜色...

像这样：DEMO

正文 CSS：

background:#f0f9ff;

标题css：

background: #a1dbff; /* Old browsers */
background: -moz-linear-gradient(top,  #a1dbff 0%, #cbebff 53%, #f0f9ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a1dbff), color-stop(53%,#cbebff), color-stop(100%,#f0f9ff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a1dbff 0%,#cbebff 53%,#f0f9ff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a1dbff', endColorstr='#f0f9ff',GradientType=0 ); /* IE6-9 */