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> 

出力：

Answer 2

それ寿仕事。

#menu-bg { 
    border: 1px solid #888888; 
    border-radius: 22px; 
    -moz-border-radius: 22px; 
    -webkit-border-radius: 22px;  
    height: 50px; 
    font-family: Arial; 
    background: #868686; /* Old browsers */ 
    background: -moz-linear-gradient(top, #868686 0%, #727272 49%, #5e5e5e 51%, #747474 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#868686), color-stop(49%,#727272), color-stop(51%,#5e5e5e), color-stop(100%,#747474)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* IE10+ */ 
    background: linear-gradient(top, #868686 0%,#727272 49%,#5e5e5e 51%,#747474 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#868686', endColorstr='#747474',GradientType=0); /* IE6-9 */ 
} 

    <div id="menu-bg"></div>