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

Question

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

我正在考虑使用该多边形图像作为背景图像，当用户将鼠标悬停在其上时，它会发生变化(变为另一个具有不同颜色的图像)。

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

• 这个案例的最佳解决方案是什么？使用 png 还是通过 css 绘制？
• 是否有工具/网站可以将我的 png 转换为 css 代码？

Answer 1

1. 使白色区域透明(在 GIMP 中颜色为 alpha)
2. Convert the image to a data URI (这是可选的，但它会使您的网站加载速度更快)
3. 使用 (2) 中的 url 作为 background-image 并使用您想要的任何 background-color。