假设我有一个像这样的多边形图像PNG文件（没有边框，形状用一种颜色填充，没有渐变，图像的背景是透明的）http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
我正在考虑将该多边形图像用作背景图像，当用户将鼠标悬停在其上时，它将被更改（转换为另一种颜色不同的图像）。
但我也希望可以自定义背景图像的颜色。所以，我在想是否有可能绘制多边形而不是使用图像文件，以便颜色可以自定义（我不认为为一种颜色创建一个文件是一个好主意，依此类推）
答案 0 :(得分：9)
background-image并使用您想要的任何background-color。答案 1 :(得分：4)
使用它来转换图片：http://codepen.io/blazeeboy/pen/bCaLE 我认为使用转换后的图像要好得多，因为浏览器可以更快地加载它们。
答案 2 :(得分：2)
我认为使用CSS是错误的。是的，可以使用CSS创建很多形状，但是有一些限制，无论如何，使用CSS绘制形状有点像黑客，即使它只是一个简单的三角形。
而不是CSS，我建议SVG是适合这项工作的工具。
SVG是一种可嵌入网站的矢量图形图形格式，可以直接在网站内通过Javascript创建或更改。更改简单多边形的颜色和形状与使用SVG一样简单。
使用SVG的另一个好处是，因为它是矢量图形，所以它是可扩展的，因此您可以以任何尺寸显示它。
SVG的唯一缺点是旧版IE（IE8及更早版本）不支持它。但是，这些浏览器确实支持一种称为VML的替代语言，并且存在几个可以与之兼容的好的Javascript库，从而允许您完成跨浏览器的兼容性。我推荐的是Raphael.js。
这是一个很小的（也很容易）的Javascript代码，而不是一个非常混乱的CSS。对我来说似乎是一个胜利者。
答案 3 :(得分：0)
也许您可以使用：https://javier.xyz/img2css/，原则是使用box-shadow，如果图片很小，就可以了，所以您应该考虑性能