Flex不支持background-position属性的问题

我在为一个HBox标签添加背景图像的时候碰到了问题。

虽然HBox的CSS属性支持中有background-position这个属性,并且支持top、left等位置,但是当我正确设定并编译swf之后,发现背景图像并不像我设置的那样排列,反而没什么变化。google了一下资料,找到了Flex cookbook上的解决办法:

CSS background-position

但是,这个办法在我的程序(Flex SDK 3.4)中并不管用,没办法,我还是只能用degrafa来实现了。degrafa是个优秀的矢量绘图引擎,使用它不仅能支持background-position,还能支持background-repeat(关于背景平铺,还可以看 这篇文章 )。

使用方法:

HBox
{
    border-skin: ClassReference("com.degrafa.skins.CSSSkin");
    background-image: Embed(source="windowroom/bg2.jpg");
    background-position:top;
    background-repeat:no-repeat;

}

引入 com.degrafa.skins.CSSSkin 包后,编译的swf文件大小会增加51KB。如果对文件大小很在乎的话,还是去仔细研究一下Flex Cookbook中提供的方法好了。 😉

如何在Flex中实现图片背景平铺

别找了,Flex自己是没这个功能的。下面这些链接都讲解了怎么自行实现。

转自:http://bbs.airia.cn/FLEX/thread-4095-1-1.aspx

Background image repeat in flex 3 – DEGRAFA!

e.g:

Application {
   background-image:    Embed("assets/images/the_image_goes_here.png");
   background-repeat:   repeat;
   background-position: center;
   background-blend:    multiply;
   borderSkin:          ClassReference("com.degrafa.skins.CSSSkin");
} 

此外还有:
继续阅读如何在Flex中实现图片背景平铺