CSS3：在图像上获得渐变的正确语法是什么？

Question

我正试图在图像中使用CSS3来获取DIV中的渐变：

使用：

.bar-header {
    background: linear-gradient(to bottom top, yellow , blue) !important;
}

但没有运气，在上图中得到结果的正确语法是什么？

感谢您的任何建议。

Answer 1

更长的代码可以提供更好的跨浏览器支持。请注意，并非所有这些都是必需的。我还在顶部添加了边框，不太确定是否需要它。

.bar-header {
  background: #409be8; /* Old browsers */
  background: -moz-linear-gradient(top,  #409be8 0%, #4883e6 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#409be8), color-stop(100%,#4883e6)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #409be8 0%,#4883e6 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #409be8 0%,#4883e6 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #409be8 0%,#4883e6 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #409be8 0%,#4883e6 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#409be8', endColorstr='#4883e6',GradientType=0 ); /* IE6-9 */
  
  border-top: 2px solid #545de4; /* Border displayed above */
  width: 808px; /* For the demo, to make it visible */
  height: 100px; /* For the demo, to make it visible */
}

<div class="bar-header"></div>

Answer 2

使用Color Picker / ColorZilla等附加功能获取图像顶部/中间/底部的颜色，并在某些＆＃34; CSS Gradient Generator＆＃34;中使用此数据。要查找任何这些程序，请使用Google搜索。