Question

我想在flex中将backgroundImage属性设置为类似“../img/foo.png”的内容。我的代码如下所示：

<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");

有效，但不适合我。有没有办法实现它？

Answer 1

尝试添加url，让它知道background-image的路径：

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

Answer 2

BorderContainerSkin不期望背景图片的网址。

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

正如文档（我上面链接的）指出的那样，BitmapFill的来源可以是以下之一：

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

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

要使用默认外观，您可以执行以下操作：

使用装载程序加载图像
加载完成后，从加载的内容中获取位图数据
将其应用为背景图片

this answer中详细介绍了加载和获取位图数据的步骤。

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

borderContainer.setStyle("backgroundImage", loadedBitmapData);

请注意，虽然您可以在Flex CSS中使用带连字符的样式名称，但在代码中您不能引用带连字符的样式名称，并且需要像我上面所做的那样使用驼峰式案例。

如何在flex 4中的css文件中设置背景图像属性？

2 个答案: