`

Flex 4 设置背景图片

阅读更多
Flex 3中Canvas是可以设置backgroundImage的,但是在Flex 4的Spark组件中则不支持backgroundImage属性的设置,怎么办呢?方法当然很多:

可以考虑用s:Group去代替Canvas,两个组件可以达到类似的功能,

<s:Group width="100%"
height="111">
<s:Rect width="100%"
height="100%">
<s:fill>
<s:BitmapFill fillMode="scale"
source="@Embed(source='/assets/image/test.png')"/>
</s:fill>
</s:Rect>
<s:Button label="test"
color="#FFFFFF"
left="10"
top="10"/>
</s:Group>




也可以在Canvas的外面用BorderContainer制造“假象”,


<s:BorderContainer backgroundImage="@Embed(source='/assets/image/test.png')"
backgroundImageFillMode="scale"
width="100%"
borderVisible="false">
<mx:Canvas id="upPanel"
width="100%"
height="111"
horizontalScrollPolicy="off"
verticalScrollPolicy="off">
<s:Button label="test"
color="#FFFFFF"
left="10"
top="10"/>
</mx:Canvas>
</s:BorderContainer>
分享到:
评论

相关推荐

    FLEX 背景图片设置

    在本文中,我们将深入探讨如何在...总结,设置FLEX背景图片涉及MXML组件或ActionScript代码的使用,通过嵌入图片资源并调整其尺寸和对齐方式来实现。理解这些技巧将帮助你更好地定制FLEX应用的视觉呈现,提升用户体验。

    Flex4中头部背景图片的Accordion

    ### Flex4中头部背景图片的Accordion知识点解析 在Flex4框架中,开发人员经常需要创建具有高度定制化外观的应用程序组件。本篇文章将基于提供的文件信息深入探讨如何在Flex4中实现一个拥有自定义头部背景图片的...

    flex视频添加背景图片

    本教程将详细讲解如何为Flex VideoDisplay组件添加背景图片,以及如何利用Flex播放器的加载事件和方法进行有效控制。 首先,我们要明白在Flex中添加背景图片的基本步骤。这通常涉及到使用 mx.graphics.ImageSource ...

    FLEX4按钮状态切换背景

    提供的“FLEX4按钮状态切换背景”压缩包很可能包含了一系列不同状态的背景图片(如`up.png`, `over.png`, `down.png`, `disabled.png`)。这些图片可以按照上面的CSS样式方法应用于Flex4的Button组件,以实现按钮在...

    Flex3 背景图片SWC 类

    用这个包,你可以很快的给Flex3 VBox等添加上背景图片

    flex 图片缩放

    例如,如果一个16:9比例的图片被放入一个4:3的Image组件中,图像将按比例缩放,使得宽度适应4,高度为3的比列,结果会在上下两侧留下空白。 然而,有时候我们需要强制图像拉伸以适应特定的宽高比,这通常发生在希望...

    flex控制桌面背景

    Flex不仅能够用来开发Web应用,还可以通过特定技术与桌面环境进行交互,获取和设置桌面背景信息。 首先,`Preloader.as` 是一个常见的Flex组件,它负责在应用程序加载之前显示进度条,提高用户体验。在处理桌面背景...

    flex 图片浏览,flex图片滚动效果

    4. **布局管理**:在图片滚动效果中,`TileLayout`或`HorizontalLayout`布局常被用来排列图片,让用户可以水平或垂直滚动浏览。这些布局管理器可以自动调整大小和位置,以适应不同的屏幕尺寸。 5. **事件监听**:...

    flex剪裁图片demo

    可以设置剪裁框的背景颜色为半透明,以便看到图片。剪裁框的大小应与图片相同,以便可以完全覆盖图片。 ```css .cropper { position: relative; background-color: rgba(0, 0, 0, 0.5); width: 100%; height: ...

    flex 背景图片重复的组件库

    flex 背景图片重复的组件库 类似HTML的CSS样式表中的背景重复

    Flex 4 进度条的皮肤

    例如,可以设置`&lt;s:Rect&gt;`的`fill`属性为一个渐变色或图片。 - 滑块(Slider):滑块通常代表已完成的部分,可以自定义其宽度、高度和颜色。滑块的位置和大小会随着进度值的改变而动态变化。 - 高亮区域...

    在flex的dataGrid控件中显示图片的实践

    4. **数据传输**:在Spring和Hibernate环境中,我们需要设置一个服务层,将图片的二进制数据从数据库中检索出来,然后通过HTTP响应发送给Flex客户端。这可能涉及到使用Spring的`@ResponseBody`注解,以及处理二进制...

    Flex模仿HTML的CSS样式表中的背景重复

    用于模仿HTML的CSS样式表中的背景重复显示功能

    flex加载大图片等待特效

    4. 动画和过渡效果:利用CSS的`transition`属性实现平滑的图片显示效果。 5. 延迟加载(可选):了解并应用`Intersection Observer` API,实现图片的懒加载。 通过这些技术,我们可以有效地改善大图片加载时的用户...

    flex中给图片或任意组件着色的方法

    4. **使用9-slice scaling**:对于需要保持角部不变形的图片,如按钮或图标,可以使用9-slice scaling技术。在创建自定义组件时,确保正确设置`nineSliceProperties`,然后在`updateDisplayList()`中应用颜色过滤器...

    flex弹性布局+图片遮罩层作业

    在本项目中,“flex弹性布局+图片遮罩层作业”主要涵盖了两个重要的前端网页开发技术:Flex布局和图片遮罩层。接下来,我们将详细探讨这两个技术,并结合项目描述,了解如何将它们应用于实际的网页设计中。 首先,...

    FLEX 容器内多个图片分别拖动

    - 设置 `_mask` 的属性,如 `source` 属性设置为背景图片路径,如 `"panadaBg.png"`。 - 调整 `_mask` 的尺寸,如 `width` 和 `height` 分别设置为 `200`。 - 将 `_mask` 添加到一个容器(如 `myGroup`)中,以便...

    Flex 登录界面 开发经验分享

    在该博客中,作者提供了一段ActionScript代码,用于实现在Flex应用中使用循环背景图片的功能。这种方法涉及到在CSS文件中定义图片路径以及在ActionScript中编写逻辑来处理背景图片的循环显示。 **示例ActionScript...

    用Flex4编写的闹钟+电子钟+计时器,绝对能用

    7. **内置图片**:项目中提到“内部自带图片”,这可能是指为界面添加了图标或者背景图片,提升应用的视觉效果。在Flex4中,可以使用BitmapAsset或者Image组件来加载和显示图片资源。 8. **100%可运行**:这意味着...

    flex css 模版经典

    - `images`:存放网页中使用的图像资源,如背景图片、图标等。 综上所述,Flex CSS模板经典是一个强大的设计工具,通过理解和运用Flexbox布局,开发者能够创建出更加灵活、响应式的网页,适应各种屏幕尺寸和设备。...

Global site tag (gtag.js) - Google Analytics