如何在不失透明度的情况下调整图标图像大小？

我直接在HTML中使用的图标如下：如何在不失透明度的情况下调整图标图像大小？

<div class="tabbertab" title='<img height="20" width="20" src="<%=contextPath%>/images/icons/bicycle.png">&nbsp;Bicycle</img>'>

所以图标形象得到了安置除了自行车文本。

该文本是Tab的一部分。选择哪个颜色会变化（白色到浅蓝色，反之亦然）。

图标的背景也反映了这一点，因为图标具有透明背景。正如你所看到的，我根据它将要显示的地方调整了图像的大小。

不过，现在我用如下javascript代码里面的图标的要求：

iconFile = siteroot + '/images/icons/bicycle.png'; 
anchor.style.backgroundImage = 'url(' + iconFile + ')'; 
anchor.style.backgroundRepeat = 'no-repeat';   
anchor.style.backgroundPosition = '1px 2px';

其中siteroot是路径到应用程序的根。

由于这里我直接使用可用大小的图标文件。我使用mspaint将图标图像调整为20 x 20像素。

然而，现在的图标图像似乎是在白盒（而不是透明的）20 20等图标背景颜色不改变，因为每它是在标签的背景的。

是否有任何好的开源工具可以调整图标图像的大小而不会失去透明度。我没有访问photoshop。

来源

2011-12-13 Nik

我没有看到你使用任何图标。 “.png”是一种图像格式，你有一个图标约定，我不认为在网页中有这样的约定。 –

这在技术上是偏离主题的。您可能需要将您的问题重构为“如何在保持透明度的同时调整PNG文件的大小？”并要求超级用户。 – BalusC

@BalusC：谢谢！但这是我第一次碰到这个问题。所以没有意识到。 – Nik

您可以在原始背景中看到背景的原因是因为图标文件具有透明背景。

你说你把图标大小调整为20x20--我猜你以前做过的任何程序都会丢失原始.png文件中的png透明度，并将背景变成白色。

尝试使用未调整大小的图像（即使看起来不正确）来验证这是否正确，然后使用css调整大小解决方案或更好的程序来调整不会丢失透明度信息的图标大小。

来源

2011-12-13 12:49:23 NibblyPig

是的。这是正在发生的确切行为。你可以请指导我对CSS调整大小的解决方案或一些不会失去透明度的程序。 – Nik

http://techpp.com/2009/09/20/quickly-resize-png-images-retain-transparency/得到了解决方案。不过请分享，如果你有更好的解决方案。 – Nik

只需使用像photoshop一样体面的图像编辑器工具和/或学习如何使用它。 – BalusC

如何在不失透明度的情况下调整图标图像大小？

回答

相关问题