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

时间:2011-12-13 12:39:39

标签: css image icons

我直接在html中使用了icon,如下所示:

<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 x 20的白色框(而不是透明),因此图标背景颜色不会根据其所在选项卡的背景而改变。

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

1 个答案:

答案 0 :(得分:1)

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

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

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