我有被调整到集装箱大小的图像加载时的Image对象。 这将加载图像是动态的大小，以便调整大小后，我结束了与图像对象的白色背景显示的条子。 我如何可以使图像的对象不是有一个白色的背景，是透明的。 巴布亚新几内亚的部分地区有透明的部分，但显示为白色，由于对象的白色背景是装入。

I have an Image object that gets resized to the containers size when the image loads. The images that it will load are dynamic in size so after resize I end up with a sliver of the image object's white background showing. How can I make the Image object not have a white background and be transparent. Parts of the PNG's have transparent parts but show up as white due to the white background of the object is it loaded into.

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" headerHeight="20" >

  <mx:Script>
    <![CDATA[
      public function set source( val:String ):void{
        this.img.source = val;
      }
      private function onLoad( e:Event ):void{
        // resize image on load to fit
        var scale:Number = (this.height - 38) / this.img.contentHeight; // 38 is adjustment for headheight and padding
        this.img.scaleX = scale;
        this.img.scaleY = scale;
      }
    ]]> 
  </mx:Script>

  <!-- how do I make this image object have a transparent background -->
  <mx:Image id="img" complete="onLoad(event)" />

</mx:Panel>

在屏幕截图中可见2个从code我张贴上面所做的对象。 正如你可以看到有一个白色边框。

In the screen shot visible are 2 of the objects made from the code I posted above. As you can see there is a white border.

这里是PNG图像之一 这PNG有350透明的1英寸边框@ PPI这是72 PPI那么一点点小 你看不到的边框在这里很明显，但如果你将它拖动到桌面上，并在Photoshop中打开你会看到它

and here is one of the PNGs This png has a transparent 1 inch border at 350@PPI this is 72 PPI So a tad smaller You can not see the the border here obviously but if you drag it to your desktop and open in photoshop you will see it

由于SuperSaiyen建议我加的backgroundColor =＃000000到面板上，我得到这个结果。正如你可以看到我有一个黑色的边框了。

As SuperSaiyen suggested I added backgroundColor="#000000" to the panel and I got this result. As you can see I got a black border now.

所以，我继续补充backgroundAlpha =0伴随着的backgroundColor =＃000000到面板，得到了这一点。 所以，现在我几乎都有，但仍然有它周围的蓝颜色。它并不完全100％透明呢。 我真的不知道为什么面板背景将改变图像标记。 我想一些从父继承是怎么回事。 不过需要摆脱蓝色的。

So i went ahead and added backgroundAlpha="0" along with backgroundColor="#000000" to the panel and got this. So now I almost have it but there is still that bluish color around it. Its not quite 100% transparent yet. I really have no idea why the panel background would change the image tag. I guess some kind of inheritance from the parent is going on. Still need to get rid of the blue.

推荐答案

而不是设置的规模，试试这个：

Instead of setting the scale, try this:

<mx:Image id="img" height="{this.height-38}" maintainAspectRatio="true" />

我试图重新您的问题，甚至与规模，我没有看到白色边框。                    

I attempted to recreate your issue, and even with the scale I did not see the white borders.

我有一个黑色的边框，因为这是面板的背景...

I have a black border because that is the background of the panel...

<mx:Panel id="thePanel" headerHeight="20"
              horizontalAlign="center" verticalAlign="middle"
              height="200" width="150"
              backgroundColor="#000000">

        <!-- how do I make this image object have a transparent background -->
        <mx:Image id="img" height="{thePanel.height-38}" maintainAspectRatio="true" />

    </mx:Panel>

编辑： 所以，你看到背景是面板后面的框的背景，而不是图像（见面板opaqueBackground道具）。要那么什么是设置在面板的背景是相同颜色的面板的边界。是面板右侧容器使用？如何用roudned角落的HBox？

So the background you're seeing is the background of the box behind the panel, not the image (see opaqueBackground prop on panel). What you want then is to set the background of the panel to be the same color as the borders of the panel. Is panel the right container to use? How about a HBox with roudned corners?

<mx:VBox id="thePanel" cornerRadius="4" backgroundColor="0xd1dbe9"
             horizontalAlign="center" verticalAlign="middle"
             height="200" width="150"
             paddingBottom="5" paddingLeft="5" paddingTop="5">
        <mx:Label text="Bind to title String" />
        <mx:Image id="img" width="100%" height="100%"/>
    </mx:VBox>