如何通过查看渐变图像找到正确的渐变混合?

时间:2013-06-19 17:06:54

标签: css css3 button gradients

我有以下图片:

enter image description here

我需要适当的渐变才能使这项工作成为css的新手我无法理解。

我尝试过的一些颜色是:

6FBFC5 66BAC0 2F9BA3

我也使用过这个工具:http://www.colorzilla.com/gradient-editor/

1 个答案:

答案 0 :(得分:1)

这应该非常准确:

    background: #6ec0c7; /* Old browsers */
    background: -moz-linear-gradient(top,  #6ec0c7 0%, #62b5bc 50%, #58a9b1 99%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6ec0c7), color-stop(50%,#62b5bc), color-stop(99%,#58a9b1)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6ec0c7 0%,#62b5bc 50%,#58a9b1 99%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6ec0c7 0%,#62b5bc 50%,#58a9b1 99%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6ec0c7 0%,#62b5bc 50%,#58a9b1 99%); /* IE10+ */
    background: linear-gradient(to bottom,  #6ec0c7 0%,#62b5bc 50%,#58a9b1 99%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ec0c7', endColorstr='#58a9b1',GradientType=0 ); /* IE6-9 */

它使用原始图像中的3个色点。如果不知道确切的起点和多少不同的单一颜色构成上述内容,则很难重新创建100%匹配。你不应该用眼睛来区分你和我的差异