CSS之background-size属性
来源:互联网 发布:chm阅读器 for mac 编辑:程序博客网 时间:2024/04/20 10:21
语法: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取值为和<percentage>
时可以设置两个值,也可以设置一个值,当只取一个值时,第二个值相当于auto,但这里的auto并不会使背景图片的高度保持自己原始高度,而会与第一个值相同
实例:
随便找张图片(50px*50px)来当作背景图片使用
DEMO1:auto
我来看第一个DEMO,在前面的DEMO上加上和个class名为”backgroundSizeAuto”,在这个Demo上我们应用上前面所示的背景,并把background-size取值为auto
DEMO2:length
DEMO3:percentage
DEMO4:cover
DEMO5:contain
DEMO三中的cover是把背景图片放大到适合元素容器的尺寸,这时的contain刚好是跟cover相反,是把背景图片缩小到适合元素容器的尺寸
总结:从上面的几个DEMO效果可以看出,只有当background-size值为auto时,背景图片才不会变形失真,而其他值都会造成背景图片变形夫真,所以大家使用时需要仔细考虑好,以免给你的制作带来不良效果
阅读全文
0 0
- CSS之background-size属性
- CSS background-size属性
- css中background-size属性
- CSS中background-size的cover属性
- IE7 8兼容css background-size属性
- CSS之background-position属性
- CSS之background-origin属性
- CSS之Background-clip属性
- CSS中背景图片的属性:background-repeat、background-position、background-size
- CSS3 background-size属性
- background-size属性
- CSS3 background-size 属性
- CSS3:background-size属性
- background-size属性详解
- CSS3 background-size 属性
- CSS background属性之主要背景属性
- CSS属性之background-position理解
- CSS background属性之背景设置详解
- Java 8 Function之Predicate
- 分布式事务
- 证明题 8.10
- css三种书写格式以及import与link的区别
- 前端学习笔记--AJAX的使用(一)
- CSS之background-size属性
- 响应式编程总览
- FCC-Front End Development jQuery
- 新浪微博美女图片的爬虫
- (bzoj 2734 [HNOI2012]集合选数)<状压DP>
- VS静态编译
- Java8 方法引用-Method References
- C# 读取Access数据库及php读取服务器上的Access数据库
- hibernate工作流程