css - 调整css渐变背景

Question

是否可以修改/调整渐变背景，使淡入淡出开始变低。例子，看这里的 fiddle http://jsfiddle.net/gZgLc/5/

例如，我希望白色 ti 在“123test”文本处开始淡入，我该怎么做？

HTML

<div id="main">
<div class="feature-box">
  <div class="feature-box-tab">
    <div class="slide" style="height:250px;">

            <div class="inner">
                <ul class="breadcrumb">
                    <li><a href="index.php">Home</a></li>
                </ul>
            </div>
    </div>
  </div>
</div>

<div class="single-feature-top">
    <p>123test. 123test<br><br>
</div>
<br>
</div>

CSS

#main {
width:958px;
position:relative;
top:-9px;
background:#FF9900 url(../images/core/header.png) no-repeat center top;
border:1px solid #dadada;
border-top:none;
border-bottom:2px solid #dadada;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-ms-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
margin:0 auto 25px;
background: #fff;
background: url('linear-gradient.png') 0 0 repeat-x;
background: -webkit-linear-gradient(#fff, #FF9900);

Answer 1

当然...您必须为此使用百分比。

Solution

所有代码都是从这个网站生成的。 Source Website

添加了 CSS。

background: -moz-linear-gradient(top, #fff 0%,#fff 75% #ff9900 80%, #ff9900 100% );
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff),color-stop(70%, #fff), color-stop(80%, #ff9900),  color-stop(100%, #ff9900));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%,  #ff9900 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%);
/* IE10+ */
background: linear-gradient(to bottom, #fff 0%,#fff 75%, #ff9900 80%, #ff9900 100%, #ff9900 100%, #ff9900 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eded2f', endColorstr='#ff9900', GradientType=0);
/* IE6-8 */

编辑: 另请记住，这在较旧的 IE 浏览器 (IE6-8) 上可能无法完全相同。

EDIT2:更改 fiddle 中的颜色以反射(reflect)您想要的颜色