6

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

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

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

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

4 回答 4

9
  1. 使白色区域透明（在 GIMP 中颜色为 alpha）
  2. 将图像转换为数据 URI（它是可选的，但它会使您的网站加载速度更快）
  3. 使用 (2) 中的 url 作为background-image并使用任何background-color你想要的。
于 2013-08-11T12:34:49.333 回答
4

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

于 2013-08-11T12:40:31.890 回答
2

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

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

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

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

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

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

于 2013-08-11T13:29:13.023 回答
1

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

于 2019-02-19T02:23:45.873 回答