1

我想在 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");

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

4

2 回答 2

0

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

.bg {
    background-image           : url("../img/foo.png");
    background-image-fill-mode : repeat;
}
于 2013-04-03T16:38:56.463 回答
0

BorderContainerSkin不期望背景图像的 URL 。

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

正如文档（我在上面链接到的）所示，该 BitmapFill 的来源可以是以下之一：

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

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

要使用默认皮肤，您可以执行以下操作：

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

此答案中详细介绍了加载和获取位图数据的步骤。

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

borderContainer.setStyle("backgroundImage", loadedBitmapData);

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

于 2013-04-06T23:38:35.940 回答