0

我使用以下内容创建了一个带有颜色停止的简单 css 栏：

#testing{
  width:100%;
  height:40px;
   background-image: -webkit-linear-gradient(left, #034a96 80%, #eab92d 50%);  
    background-image: -moz-linear-gradient(top, #034a96 50%, #eab92d 51%);  
    background-image: -ms-linear-gradient(top, #034a96 50%, #eab92d 51%);  
    background-image: -o-linear-gradient(top, #034a96 50%, #eab92d 51%);  
    background-image: linear-gradient(top, #034a96 50%, #eab92d 51%); 
      -webkit-border-radius: 15px;
     -moz-border-radius: 15px;
          border-radius: 15px;
}

我想做的是让栏的前 80% 有一个渐变，从顶部开始，颜色为 #034a96 到 #0663c7，然后只是渐变为栏的 50% 着色。然后对于另外 51%，我从顶部有另一个渐变，从 #eab92d 到 #c79810。我要问的是是否可以相互之间有多个渐变，例如：

background-image: -webkit-linear-gradient(left,  top #034a96 to #0663c7  50%, top #eab92d to #c79810 51%);

或类似的规定。我希望我对一切都很清楚。提前致谢

4

1 回答 1

1

是的你可以。一个简单的例子（不完全是你的颜色，但它显示了计划）：

background: #b8e1fc; /* Old browsers */
background: -moz-linear-gradient(top, #b8e1fc 0%, #a9d2f3 10%, #90bae4 25%, #90bcea 37%, #90bff0 50%, #6ba8e5 51%, #a2daf5 83%, #bdf3fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b8e1fc), color-stop(10%,#a9d2f3), color-stop(25%,#90bae4), color-stop(37%,#90bcea), color-stop(50%,#90bff0), color-stop(51%,#6ba8e5), color-stop(83%,#a2daf5), color-stop(100%,#bdf3fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* Opera 11.10+ */
background: linear-gradient(to bottom,  #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b8e1fc', endColorstr='#bdf3fd',GradientType=0 ); /* IE6-9 */

此代码不会在 IE 中创建多步渐变。直到 IE9，这些都是不可能的（只有简单的渐变），但是 IE9 支持 SVG 数据。写起来有点复杂，但你应该看看http://www.colorzilla.com/gradient-editor。这是一个为渐变创建 CSS 代码的在线工具。它还支持 IE9 的 SVG 渐变。

于 2013-06-25T18:37:24.853 回答