调整css梯度背景

是否可以修改/调整渐变背景，使淡入度开始降低。例如，请看这里的小提琴

比如说，我想让白色的ti在“123test”文本中开始淡入，我该怎么做

HTML

---

绝对地。。。你必须使用百分比

所有代码都是从该网站生成的

添加了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：更改小提琴中的颜色以反映所需的颜色

您的意思是即时更改，还是只是更改CSS以使其始终不同？如果你只是想知道正确的语法是什么。。。我建议使用这个工具：是的，我的意思是永久性的，所以梯度是我希望它一直开始的地方。我不想让它改变。谢谢，我会查看链接。你能在main后面添加一个#background

div

div吗？你读过关于渐变的文档了吗？例如@RoToRa所说的，阅读关于颜色停止的部分，它允许您指定每种颜色的位置（例如，您可以在0%和70%处使用相同的颜色）。或者，如果您只想在

.single feature top

上使用渐变，您可以将其应用于该渐变？您不必使用百分比，任何长度单位（如

px

，

em

等）也可以使用。正确。然而，它必须与它所应用的元素相关。MarsOne，你的解决方案正是我想要的。我不得不稍微编辑百分比，以得到我想要的，但完成了工作！非常感谢。@jfar\u magnetik，很高兴见到你Help@MarsOne，随着它的发展，我想看看有一条实线的背景是什么样子的。我更新了你的JSFIDLE，我现在想尝试的是把这条线抬高，这样橙色会稍微高一点。我该怎么做？

#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);

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