css - 如何在 flex 4 的 css 文件中设置 backgroundImage 属性？

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

BorderContainerSkin不需要背景图片的 URL。

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

如文档(我在上面链接的)所示，该 BitmapFill 的来源可以是以下之一:

• Bitmap 或 BitmapData 实例。
• 代表 DisplayObject 子类的类。 BitmapFill 实例化类并创建它的位图渲染。
• DisplayObject 的实例。 BitmapFill 将其复制到 Bitmap 中进行填充。

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

要使用默认皮肤，您可以这样做:

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

加载和获取位图数据的步骤详见this answer .

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

borderContainer.setStyle("backgroundImage", loadedBitmapData);

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