我可以将图像转换为 CSS3 吗？答案

【问题标题】：Can I convert an image to CSS3?我可以将图像转换为 CSS3 吗？
【发布时间】：2013-08-11 12:27:38
【问题描述】：

假设我有一个这样的多边形图像PNG文件（无边框，形状填充一种颜色，无渐变，图像背景透明）http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

我正在考虑使用该多边形图像作为背景图像，当用户将鼠标悬停在其上时，它将被更改（为另一个具有不同颜色的图像）。

但我还希望背景图像的颜色可以自定义。所以，我在想是否有可能绘制多边形而不是使用图像文件，以便颜色可以自定义（我认为为一种颜色创建一个文件等等不是一个好主意） .

【问题讨论】：

【解决方案1】：

【讨论】：

我已经尝试过您的方法并将背景颜色设置为红色，但它不起作用。见我的jsfiddle。 jsfiddle.net/K44mE/499 如何使灰色多边形更改为例如红色多边形？
而你的代码（即使有点难读）能达到你的预期，你只在悬停时添加background-color(:hover)
谢谢，但我的意思是将灰色多边形本身更改为红色多边形。不要将其背景更改为红色。
使多边形形式透明并且它周围的空间是平原，而不是相反。
我明白你的意思。但这意味着父背景必须永久为“白色”（在这种情况下）。如果我也需要自定义父背景怎么办？那么，这是一种权衡吗？

【解决方案2】：

使用它来转换图像：http://codepen.io/blazeeboy/pen/bCaLE 我认为使用转换后的图像要好得多，因为浏览器加载它们的速度更快。

【讨论】：

感谢您的工具。不过对我有用。但是，我仍然必须为每 1 种颜色生成 1 张图像？
我只想制作一个形状作为背景图像，并在悬停时更改其颜色。有可能吗？
如果我对问题的理解正确，您有多种选择： 1. 使用 JS 更改您想要的图像颜色。 2.制作两个图像，然后在移动时更改它们。 3. 制作一个精灵并对其进行操作。 ...这实际上是您的选择：）
我们可以用javascript改变图像的颜色吗？我以前从来不知道。网上有例子吗？
我找到了一个例子stackoverflow.com/questions/9303757/…

【解决方案3】：

我认为使用 CSS 是错误的。是的，使用 CSS 可以创建很多形状，但是有一些限制，而且无论如何，使用 CSS 绘制形状有点小技巧，即使它只是一个简单的三角形。

比起 CSS，我建议 SVG 是适合这项工作的工具。

SVG 是一种矢量图形的图形格式，可以嵌入到站点中，并且可以直接在站点内通过 Javascript 创建或更改。更改简单多边形的颜色和形状与使用 SVG 一样简单。

使用 SVG 的另一个优点是，因为它是矢量图形，所以它是可缩放的，因此您可以以任何尺寸显示它。

SVG 唯一的缺点是旧版本的 IE（IE8 和更早版本）不支持它。但是，这些浏览器确实支持另一种称为 VML 的语言，并且存在几个可以与任何一种语言一起使用的优秀 Javascript 库，从而使您可以完全跨浏览器兼容。我推荐的是Raphael.js。

所以是一小段（而且非常简单）的 Javascript 代码，而不是非常混乱的 CSS。对我来说似乎是赢家。

【讨论】：

感谢您分享好主意。然而，我觉得我们做的事情太复杂了，只是为了一件小事。我只想将按钮制作为多边形形状并在悬停时更改其颜色。但我不想为我想要的每种悬停颜色创建一个新图像。有没有其他办法？

【解决方案4】：

也许你可以用这个：https://javier.xyz/img2css/，原理就是用box-shadow，图片小也可以，要考虑性能

【讨论】：