我可以将图像转换为CSS3吗？ [英] Can I convert an image to CSS3?

问题描述

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

Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF

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

I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.

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

But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).

• 这种情况的最佳解决方案是什么？使用png或通过css绘制？


• 是否有工具/网站将我的png转换为css代码？

推荐答案

1. 使白色区域透明GIMP）


2. 将图片转换为数据URI （它是可选的，但它会使你的网站加载更快）


3. 使用（2）中的url作为 background-image

1. Make the white areas transparent (colour to alpha in GIMP)
2. Convert the image to a data URI (it's optional but it will make your site load faster)
3. Use the url in (2) as the background-image and use any background-color you want.

这篇关于我可以将图像转换为CSS3吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！