首页 技术 正文
技术 2022年11月21日
0 收藏 895 点赞 2,669 浏览 630 个字

最近在用AppCan框架技术做跨平台移动应用开发,碰到界面布局设计中图片平铺、拉伸效果。

我们用到的是CSS 3中Background-size属性。

网上查了下这个属性,小记下:

取值: background-size: auto || length || percentage || cover || contain

取值说明:

1、auto:此值为默认值,保持背景图片的原始高度和宽度;

2、length:此值设置具体的值,可以改变背景图片的大小;

3、percentage:此值为百分值,可以是0%〜100%之间任何值,但此值只能应用在块元素上,所设置百分    值将使背景图片大小根据所在元素的宽度的百分比来计算。

4、cover:此值是将图片放大,以适合铺满整个容器,这个主要运用在,当图片小于容器时,又无法使用   background-repeat来实现时,我们就可以采用cover;将背景图片放大到适合容器的大小,但   这种方法会使用背景图片失真;

5、contain:此值刚好与cover相反,其主要是将背景图片缩小,以适合铺满整个容器。

这个主要运用在,当背景图片大于元素容器时,而又需要将背景图片全部显示出来,此时我们就可 以使用contain将 图片缩小到适合容器大小为止,这种方法同样会使用图片失真。

当background-size取值可以设置两个值,也可以设置一个值。

当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高 度,而会与第一个值相同。

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,488
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,903
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,736
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,487
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:8,127
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,289