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

假设我有一个像这样的多边形图像PNG文件（没有边框，形状用一种颜色填充，没有渐变，图像的背景是透明的）

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

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

• 对于这种情况，最好的解决方案是什么？使用png还是通过css绘制
• 是否有工具/网站将我的png转换为css代码

使白色区域透明（GIMP中的alpha颜色）

（这是可选的，但会使您的站点加载更快）

使用（2）中的url作为

背景图像

，并使用所需的任何

背景颜色

---

使用此选项转换图像：

---

我认为使用转换后的图像更好，因为浏览器加载速度更快

我认为CSS在这方面是错误的。是的，使用CSS创建很多形状是可能的，但是有一些限制，而且在任何情况下，使用CSS绘制形状都有点困难，即使它只是一个简单的三角形

与CSS不同，我建议SVG是适合这项工作的工具

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

使用SVG的另一个优点是，因为它是矢量图形，所以它是可伸缩的，所以您可以以任何大小显示它

SVG唯一的缺点是旧版本的IE（IE8及更早版本）不支持它。然而，这些浏览器确实支持一种称为VML的替代语言，并且有几个很好的Javascript库可以使用这两种语言，从而允许您实现完全的跨浏览器兼容性。我推荐的是

---

因此，只需少量（非常简单）的Javascript代码，而不是非常凌乱的CSS代码。对我来说似乎是一个胜利者。

也许你可以用这个：原理是使用<代码>盒阴影< /代码>，如果图片很小，很好，所以你应该考虑性能

我已经尝试过你的方法，并且设置背景颜色为红色，但是它不起作用。看我的书。如何将灰色多边形更改为例如红色多边形？您的代码（即使有点难读）达到了预期效果，您只在悬停时添加背景色（

：hover

），谢谢，但我的意思是将灰色多边形本身更改为红色多边形。不要将其背景更改为红色。使多边形形状透明，其周围空间平坦，而不是相反。我明白你的意思。但这意味着父背景必须永久为“白色”（在本例中）。如果我也需要自定义父背景，该怎么办？所以，这是一种折衷？谢谢你的工具。不过这对我很有用。但是，我仍然必须每1种颜色生成1个图像？我只想将一个形状作为背景图像，并在悬停时更改其颜色。有可能吗？若我正确理解了这个问题，你们有几种选择：1。使用JS更改所需图像的颜色。2.制作两个图像，然后在移动时更改它们。3.制作一个精灵并操纵它。。。我们可以用javascript改变图像的颜色吗？我以前从来都不知道。你们网上有什么例子吗？我找到了一个例子，谢谢你们分享这个好主意。然而，我觉得我们做的事情太复杂了，而不是一件小事。我只想把一个按钮做成一个多边形形状，并在悬停时改变它的颜色。但我不想为我想要的每种悬停颜色创建一个新图像。还有别的办法吗？