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

RGBA指定不透明度级别，这会导致透明度（rgba（x，x，x，x）y％ - y％是不透明度）。如果你删除它们并创建没有不透明度的线性渐变，它应该保持稳定。

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

Gradients

Answer 2

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

我最好的猜测是你正在使用alpha值来制作一个很好的渐变来解析背景。但是根据我的理解，当其他元素落后时，你正在努力使它成为一个坚实的基础......

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

我相信你正在努力实现你的渐变，根据几个元素采取不同的行动。试着想想你想要实现的目标。但如果你决定让它对后面的一切都很有用，那么就把你的alpha值设置为1.0值。

所以，如果你最初：背景：-moz-线性梯度（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 + * /

如果你看，我正在制作你所有的alphas＆＃34; 1＆＃34;，所以它将100％稳固，而我通过移动你的rgb值来改变亮度，所以你仍然有一个渐变，但是这次是坚实的。

Answer 3

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

像这样：DEMO

body CSS：

background:#f0f9ff;

header 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 */

具有渐变背景的CSS Z-Index

3 个答案: