Question

我在绘制PNG图像时遇到了严重的麻烦。我看到的所有线程也会改变背景颜色。

每当顾客按下旁边的彩色面板上的按钮时，我需要更改我想要销售的可自定义项目的颜色（即眼镜：改变玻璃或镜腿或正面的颜色）。

我开始将原始图像分成4个部分（例如：玻璃，前部，左太阳穴和右太阳穴），我将它们放在另一个之上。例如，我怎么能改变右太阳穴的颜色？

我希望解决方案与IE兼容。

谢谢你的团队。

Answer 1

就个人而言，在可能的情况下（取决于你需要支持这种技术的IE版本是＆gt; 8），我用内联SVG而不是png实现这一点。 SVG的文件大小应该比png小，从而节省带宽！

复杂或基于光栅图形的任何内容都应保留为jpg / png，在您的实例中，这可能是眼镜佩戴者的背景图像。眼镜本身就是SVG。

要在内容中添加内联SVG，请在您选择的文本编辑器中打开SVG文件，复制代码（它应该看起来很熟悉，它的XML语法）并将其插入HTML中的相关图像容器中例如

<div id="myImgCnt">
    <svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
        <rect class="square" x="14.8" y="17.7" width="165.1" height="165.1"/>
        <circle class="circle" cx="105.8" cy="102" r="67.7"/>
    </svg>
</div>

请注意，我已经为圆圈和方形添加了一个类。现在，这可以像往常一样在CSS中使用。例如

.square{fill: red;}
.circle{fill: blue;}

请查看此小提琴，了解行动https://jsfiddle.net/elmarko/t7z7sbag/

中的示例

PNG图片更改颜色

1 个答案: