logo标签列表

我可以将一个图像转换成CSS3吗？

cssbackground-imagepolygons
6
假设我有一个多边形图像PNG文件，就像这样（没有边框，形状填充了一种颜色，没有渐变，图像的背景是透明的）http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF 我想使用该多边形图像作为背景图像，并在用户悬停时更改（为具有不同颜色的另一幅图像）。
但我也希望背景图像的颜色可定制。因此，我在思考是否有任何可能绘制多边形而不是使用图像文件，以便颜色可以定制化（我认为为每种颜色创建一个文件等并不是一个好主意）。
以下是需要回答的问题： 1. 这种情况下最好的解决方案是什么？使用png还是通过css进行绘制？ 2. 是否有工具/网站可以将我的png转换为css代码？
4个回答
9
  1. 将白色区域变为透明（在GIMP中使用颜色转换为透明）
  2. 将图像转换为数据URI（可选，但可以使您的网站加载更快）
  3. 使用第2步中的URL作为background-image，并使用任何您想要的background-color。
我尝试了你的方法并将背景颜色设置为红色，但它没有起作用。请看我的jsfiddle。 http://jsfiddle.net/K44mE/499/我该如何使灰色多边形变成红色多边形？ - Atthapon Junpun-eak
你的代码（即使有点难以阅读）能够按照你的期望工作，你只在悬停（:hover）时添加了 background-color。 - Nabil Kadimi
谢谢，但是我的意思是将灰色多边形本身更改为红色多边形，而不是将其背景更改为红色。 - Atthapon Junpun-eak
使多边形透明，并使其周围的空间变为平面，而不是相反。 - Nabil Kadimi
我理解你的观点。但这意味着父元素背景必须永久为“白色”（在这种情况下）。如果我也需要父元素背景可定制，那怎么办？所以，这是一个权衡吗？ - Atthapon Junpun-eak
1
谢谢Nabil，我最终决定采用你的解决方案。这是最简单的方法，并且可以跨浏览器使用。 - Atthapon Junpun-eak
4
谢谢这个工具，虽然对我很有用。但是，我仍然需要为每种颜色生成1张图片吗？ - Atthapon Junpun-eak
我想将一个形状作为背景图像，并在悬停时仅更改其颜色。这是否可能？ - Atthapon Junpun-eak
如果我理解问题正确，你有几个选项可以做到这一点：
  1. 使用JS更改所需图像的颜色。
  2. 制作两张图片，然后在进行某些移动时更改它们。
  3. 制作一个精灵并对其进行操作。
实际上，你可以自由选择要做什么 :) - Ugnius Malūkas
我们能用JavaScript改变一张图片的颜色吗？ 我以前从未听说过。你有在线示例吗？ - Atthapon Junpun-eak
1
我找到了一个例子https://dev59.com/Y2ox5IYBdhLWcg3wSCfk - Ugnius Malūkas
2
我认为使用CSS是不适合这个任务的。是的，可以使用CSS创建许多形状，但存在一些限制，并且无论如何，即使只是简单的三角形，使用CSS绘制形状也有点像黑客行为。
相比于CSS，我建议使用SVG作为此任务的适当工具。
SVG是一种可嵌入网站的矢量图形格式，可以通过网站内的Javascript直接创建或修改。使用SVG改变简单多边形的颜色和形状非常容易。
使用SVG的另一个优点是，因为它是矢量图形，所以可以缩放，因此可以在任何大小下显示。
SVG唯一的缺点是它不受旧版本的IE（IE8及更早版本）支持。然而，这些浏览器支持一种名为VML的替代语言，而且存在几个良好的Javascript库，可以与任何一种语言一起使用，从而实现完全的跨浏览器兼容性。我推荐的是Raphael.js。
所以，使用一小段（非常简单的）Javascript代码代替一段非常混乱的CSS。对我来说似乎是一个胜利者。
感谢分享这个好主意。 然而，我感觉我们为了一个小事情做了太复杂的事情。我只想把一个按钮做成多边形，并在悬停时改变它的颜色，但我不想为每个悬停颜色创建一个新图像。有其他方法吗？ - Atthapon Junpun-eak
1
也许您可以使用这个：https://javier.xyz/img2css/，原理是使用box-shadow，如果图片很小就没问题，所以您应该考虑性能。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接