`
jie66989
  • 浏览: 253348 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

flex图片背景平铺

    博客分类:
  • flex
 
阅读更多
<mx:Image width="100%" height="100%" scaleContent="false" source="assets/icons/ai.jpg" maintainAspectRatio="false" mask="" smoothBitmapContent="true" />
smoothBitmapContent 平滑处理图片,这样至少在缩小的时候不会失真,放大的时候有可能会失真
scaleContent false会按照原图加载,不够大小会进行裁剪  true根据width和height最小的一个进行原图比例缩放
maintainAspectRatio  是否按照原图比例缩放
mask 指定的mask对象遮罩
flex4中有三种方法可以实现图片平铺为背景
1.
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.mybackground {
font-size:14;
background-image:Embed("assets/images/w_bg.png");
background-position:right,bottom;
background-blend:multiply;
background-size:"100%";
backgroundImageFillMode: repeat;
}
</fx:Style>

2
<s:Graphic id="bg">
<s:BitmapImage
source="@Embed('assets/images/w_bg.png')"
width="120"
height="120"
fillMode="repeat"/>
</s:Graphic>
3
<s:Image includeIn="login" source="assets/images/main.jpg" width="100%" height="100%" scaleMode="stretch" smooth="true"/>
smooth属性,平滑处理图片
分享到:
评论

相关推荐

    day04(CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性).rar

    例如,`background-color`用于设定元素的背景色,`background-image`允许添加图片作为背景,`background-repeat`控制图片是否平铺,`background-position`可调整图片的位置,而`background-attachment`决定了背景...

    CSS的各种排版样式

    例如,可以使用`background-color`属性来设置背景颜色,`background-image`来引入背景图片,`background-repeat`控制图片是否平铺,`background-position`调整图片的位置,而`background-attachment`则决定背景图片...

    XML应用开发(软件品牌)-1期 4.11 课堂实践-使用CSS布局属性显示XML文档-环绕文本和插入图片.doc

    - `background-repeat`属性:设置图片是否平铺,通常设置为`no-repeat`以防止重复显示。 3. **其他布局属性**: - `display`属性:控制元素的显示方式,如`block`、`inline`或`flex`,用于创建各种布局模式。 - ...

    1.css常用公共样式 与bug解决方案

    4. 边框与背景:常见边框样式,如圆角边框,以及背景图片的使用,如平铺、定位等。 5. 盒模型调整:理解盒模型(content, padding, border, margin),灵活运用box-sizing属性。 6. 响应式设计:使用媒体查询@media...

    CSS基础_css_笔记

    3. **背景重复与定位**:`background-repeat`控制图片是否平铺,`background-position`设定图片位置。 4. **背景裁剪与固定**:`background-clip`决定背景颜色或图像如何裁剪,`background-attachment`控制背景是否...

    css中文对照手册.docx

    `background-repeat`控制图片的重复方式,如`repeat`(平铺)或`no-repeat`(不平铺)。`background-attachment`决定背景图片是否随内容滚动,`fixed`表示背景固定,`scroll`表示随内容滚动。`background-position`...

    CSS+div模板精华案例分析

    同时,利用CSS的背景裁剪(background-size)、平铺(background-repeat)和定位(background-position)功能,可以创造出独特的背景效果。 总结,CSS+div布局技术是网页设计的基石,掌握其原理和应用,能帮助我们...

    CSS3.zip_html 参考手册

    - **背景图片平铺方式**:`background-size`控制背景图片尺寸,`background-repeat`控制是否平铺。 3. **过渡与动画**: - **过渡(Transition)**:`transition`属性定义元素从一种样式变换到另一种样式的速度。...

    CSS3 For Web Designers

    3. **背景图片裁剪与平铺**:`background-size` 控制背景图片大小,`background-repeat` 控制背景重复方式。 ### 三、盒模型与布局 1. **盒模型改进**:CSS3引入了`box-sizing`属性,允许开发者选择边界盒模型...

    基于html和css的mi商城静态页面

    6. **图片处理**:利用CSS实现图片的响应式、裁剪、平铺等效果。 7. **定位与浮动**:使用position属性(static、relative、absolute、fixed)和float属性实现元素精确定位。 最后,前端页面布局是实现美观和功能的...

    html+css笔试附答案 (2).pdf

    9. `background-repeat`:默认情况下,背景图像会在水平和垂直方向平铺。 10. 浮动元素特性:浮动元素会变为块级元素,向父级元素的边缘靠拢,并可能超出其包含元素。 11. 盒子模型:`border`是一个复合属性,可以...

    css资源库及案例

    4. **背景平铺(Background Repeat)**:`background-repeat`属性控制背景图像如何重复,可以创建有趣的背景效果。 5. **透明度(Opacity)**:`opacity`属性用于设置元素的不透明度,实现半透明效果。 6. **伪类...

    DIV+CSS技巧知识

    而`background-image`和`background-size`属性可以用于背景图片的设置,实现响应式或平铺效果。此外,`CSS3`的`transform`和`transition`属性可以为图片添加旋转、缩放等动画效果。 表单是用户与网站互动的重要界面...

    第十一次课程 网页制作之CSS2上课

    4. **背景**:`background-color`设置背景色,`background-image`用于添加背景图片,`background-repeat`控制图片平铺,`background-position`调整图片位置。 5. **链接样式**:`a`元素的伪类如`a:link`、`a:visited...

    CSS3.3.chm.zip_CSS3.3 _chm_css3 chm

    - **背景图片裁剪与平铺**:`background-size`, `background-repeat`, `background-origin` 和 `background-clip`提供了更多控制。 3. **过渡与动画**: - **CSS Transitions**:使用`transition`属性实现属性值...

    css入门笔记

    1.css的概述 1.问题 ... 2.css的语法规范 1.... 1.... 样式声明:用样式属性和值组成(属性:值;... 1.... 2.背景颜色 ... 3.... 2.... 3.... 独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的... 背景图片...

    有用的div+css模板

    了解如何在CSS中处理图片,如设置`background-image`、`background-size`、`background-repeat`等属性,以及如何处理背景图的平铺和裁剪,是很重要的。 5. IEPNGFix.htc:这个文件可能是一个解决Internet Explorer...

    CSS基础标签.md

    - **背景平铺样式 (`background-repeat`)** 这些属性可以用来控制背景图片的表现形式。 #### 溢出处理 - **超出内容隐藏 (`overflow: hidden;`)**:隐藏超出的内容。 - **超出内容正常显示 (`overflow: visible;`...

    css3Demo.zip

    - **背景图片定位与平铺**:`background-origin`、`background-size`和`background-repeat`提供了更精细的背景控制。 3. **布局模块** - **Flexbox**(弹性盒布局):用于创建灵活、响应式的布局,如`display:...

Global site tag (gtag.js) - Google Analytics