PNG 图像更改颜色

PNG image change color

本文关键字：颜色 图像 PNG      更新时间：2023-09-26

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

每当客户按下旁边颜色面板上的按钮时，我需要更改要销售的可定制商品的颜色（即眼镜：更改玻璃杯、镜腿或正面的颜色）。

我已经开始将原始图像分成 4 个.png部分（在示例中：玻璃、前部、左太阳穴和右太阳穴），我会将它们一个放在其他部分之上。例如，我怎样才能改变右边寺庙的颜色？

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

谢谢团队。

就个人而言，在可能的情况下（取决于您需要支持此技术的 IE 版本是>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/

相关文章：