如何在Flex 4中设置CSS文件中的backgroundImage属性？

我想在background中设置backgroundImage属性为“../img/foo.png”。我的代码如下所示：如何在Flex 4中设置CSS文件中的backgroundImage属性？

<fx:Style> 
    @namespace s "library://ns.adobe.com/flex/spark"; 
    @namespace mx "library://ns.adobe.com/flex/mx"; 

    .bg { 
     background-image   : "../img/foo.png"; 
     background-image-fill-mode : repeat; 
    } 
</fx:Style> 

<s:BorderContainer width="200" height="200" styleName="bg" />

它不起作用。我不想使用嵌入式图像，所以

background-image : Embed("../img/foo.png");

的作品，但不适合我。有什么办法可以实现它吗？

来源

2013-04-03 paddlesteamer

的BorderContainerSkin没有预料到的背景图像的URL。

如果你看看皮肤，它使用BitmapFill类作为背景图像。皮肤将您指定的背景图像作为背景图像，并将其设置为用于容器实际背景的BitmapFill的source。

作为文档（即我上方连结）表示，即BitmapFill会将的源可以是下列之一：

位图或BitmapData实例。
表示DisplayObject的子类的类。 BitmapFill实例化类并创建它的位图呈现。
DisplayObject的一个实例。 BitmapFill将其复制到位图中进行填充。

因此，如果您不想嵌入图像，则需要手动加载图像并将该位图数据作为CSS样式的值提供。或者创建使用<s:Image />组件作为背景的自己的皮肤。

要使用默认的皮肤，你可以做这样的事情：

使用加载器来加载图像
加载完成时，从加载的内容获取的位图数据
申请作为背景图像

在this answer中详细说明了执行加载和获取位图数据的步骤。

PS：因为您将在代码中执行此操作，您可能无法使用CSS样式来设置背景。你必须使用setStyle()方法来设置它的ActionScript：

borderContainer.setStyle("backgroundImage", loadedBitmapData);

请注意，虽然你可以使用Flex的CSS复姓样式名称，在代码中你不能指连字符样式名称和需要使用骆驼正如我上面所做的那样。

来源

2013-04-06 23:38:35

尝试包括url让它知道你background-image的路径：

.bg { 
    background-image   : url("../img/foo.png"); 
    background-image-fill-mode : repeat; 
}

来源

2013-04-03 16:38:56 Eli

这也行不通。 – paddlesteamer

如何在Flex 4中设置CSS文件中的backgroundImage属性？

回答

相关问题