css - 如何让渐变在 CSS3 线性渐变中停止？

Question

请参阅此示例页面中的灰色条:

http://dss.com.bo/inicio.aspx

这是我尝试使用 CSS3 重新创建该渐变 - 也使用 CSS3PIE :

#navigation {
    border: 1px solid #888888;
    border-radius: 22px;
    -moz-border-radius: 22px;
    -webkit-border-radius: 22px;    
    height: 50px;
    font-family: Arial;    
    background: #AAAAAA;
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#AAAAAA), to(#757575));
    background: -webkit-linear-gradient(#AAAAAA, #757575);
    background: -moz-linear-gradient(#AAAAAA, #757575);
    background: -ms-linear-gradient(#AAAAAA, #757575);
    background: -o-linear-gradient(#AAAAAA, #757575);
    background: linear-gradient(#AAAAAA, #757575);
    -pie-background: linear-gradient(#AAAAAA, #757575);
    behavior: url(/Public/stylesheets/PIE.htc);
}

这导致:

如何减少渗色效应，使颜色过渡更困难？

Answer 1

在您想要的背景颜色上，不透明度最高为 50% 的白色渐变渐变。此方法可用于任何背景颜色，而无需更改渐变 CSS。

演示:http://jsfiddle.net/ThinkingStiff/Zn5Qb/

CSS:

#header { 
    background-color: #595454;
    background-image: linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -webkit-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -moz-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -o-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
        background-image: -ms-linear-gradient( 
            top, 
            rgba( 255, 255, 255, .4 ) 0%, 
            rgba( 255, 255, 255, .1 ) 50%,
            rgba( 255, 255, 255, .0 ) 50.5%, 
            rgba( 255, 255, 255, .0 ) 100% );
    height: 42px;
    width: 100%;
}

HTML:

<div id="header"></div>

输出: