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

Question

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

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

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

• 这种情况的最佳解决方案是什么？使用png或用css绘制它？
• 有没有工具/网站将我的png转换为css代码？

Answer 1

1. 使白色区域透明(GIMP中的颜色为alpha)
2. 将图像转换为数据URI(它是可选的,但它会使您的网站加载速度更快)
3. 使用(2)中的url作为background-image并使用任何background-color你想要的.