調整css漸變背景

是否可以修改/調整漸變背景，以便淡入淡出開始。例如，看到這裏的小提琴http://jsfiddle.net/gZgLc/5/調整css漸變背景

比方說，例如，我想白色的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);

來源

2013-08-19 jfar_magnetik

你的意思上的蒼蠅，或者只是改變CSS所以它總是有什麼不同？如果你只是想知道什麼是正確的語法...我建議只使用這個工具：http://www.colorzilla.com/gradient-editor/ – robooneus

是的，我只是永久的意思，所以梯度是我想要的地方始終開始。我不希望它改變。謝謝，我會查看鏈接 –

你可以在#main後面添加#background'div'嗎？ –

肯定......你必須使用該百分比。

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：在小提琴改變顏色，以反映所需的顏色

來源

2013-08-19 12:43:51 MarsOne

你不*有*使用百分比，任何長度單位（如'px'，'' em'等）也會起作用。 – xec

正確。但是它必須與它所應用的元素相關。 – MarsOne

MarsOne，你的解決方案正是我想要的。爲了得到我想要的，我必須稍微修改百分比，但是完成了這項工作！非常感謝。 –

調整css漸變背景

回答

相關問題