来自图像的 WebKit 渐变答案

【问题标题】：WebKit gradient from an image来自图像的 WebKit 渐变
【发布时间】：2011-04-20 07:37:47
【问题描述】：

有谁知道是否有工具可以获取图像（.png、.gif 等）并输出图像包含的渐变？

我真的很想在 css 中重新创建这个图像。看起来像是线性渐变和径向渐变的混合体，超出了我的 css 技能

【问题讨论】：

你可能想要一个图像处理库，不是吗？

标签： css webkit gradient

【解决方案1】：

从随机图像中获取渐变对于任何图像处理器来说都是困难的。通过获取图像的像素数据，找到顶部和底部像素，从中提取颜色数据，然后使用这些值创建渐变，您可能会获得更好的运气。

【讨论】：

【解决方案2】：

开始使用此工具 http://gradients.glrzad.com/ 然后在此处阅读有关径向渐变的信息以使其成为径向http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/

您可以使用该工具做到这一点：

-webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0, rgb(68,214,254)),
    color-stop(0.49, rgb(53,150,230)),
    color-stop(0.51, rgb(123,180,236)),
    color-stop(1, rgb(255,255,255))
)
-moz-linear-gradient(
    center bottom,
    rgb(68,214,254) 0%,
    rgb(53,150,230) 49%,
    rgb(123,180,236) 51%,
    rgb(255,255,255) 100%
)

那就让它成为放射状，mozilla 只在这里

-moz-radial-gradient(right bottom, 
   ellipse, 
   #44D6FE 0%, 
   #3596E6 49%, 
   #7BB4EC 51%, 
   #FFFFFF 100%) repeat scroll 0 0 transparent

这是它的样子

【讨论】：

【解决方案3】：

您的示例是两个径向渐变的重叠。中间不透明的按钮上方有一个白色到中蓝色停止到不透明径向渐变；在以右下角为中心的简单蓝色到白色径向渐变的顶部。

【讨论】：