CSS3 Background-size 详解
2017-08-03 14:43
344 查看
CSS3 Background-size 详解
前段时间在做关于响应式的页面时,由于要兼容ie8,并且要保证图片等比缩放,且对图中内容的显示有要求,导致无法使用background-size等属性,最终放弃了使用background,用<img>来替代。这样增加了代码量而且看起来很不clean。
但是很多情况下用background还是可以达到目的的,并且有解决方案(后面会提到)。下面我就详细讲下background-size。
background-size
background-size: auto || <length>||
<percentage>||
cover || contain
取值说明:
auto: 此值为默认值,保持背景图片的原始高度和宽度
length: 此值为具体的值,可能会造成与图片原始宽高比不一致
percentage: 此值为百分比,且只能用在block,inline-block元素上。注意是相对所在容器的百分比。
cover: 此值是将图片放大(当然了,如果图片本身大于容器,图片会等比缩放到合适宽高的)以适应容器大小,这个属性也是应用最多的。
contain: 此值是将图片缩小以在容器中显示完整图片。当容器的宽高比例与图片不一致时,可能会出先上下或左右留出空隙。
举个例子
1. auto | length | percentagebackground-size: auto auto; // 默认值,即保持图片原始的宽和高 background-size: auto; // 和上面的效果一样,省略的值为auto background-size: 100px 50px; // 图片变为宽100px, 高50px background-size: 100px; // 图片宽为100px, 高度auto,即高度自适应 background-size: 100% 80%; // 宽度为容器宽的100%,高度为容器高度的80% background-size: 100%; // 宽度为容器宽度的100%,高度auto自适应1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
2. cover
cover属性会对图片进行剪裁,当图片大小超过容器大小时。所以一般也会配合
background-position来决定显示图片内容的位置。
background-size: cover;1
1
效果:
background-size: cover; background-position: center;1
2
1
2
效果:
3. contain
contain属性将图片缩小至以在容器中显示完整图片,但大多数情况下,由于容器宽高比例与图片比例不同,造成图片与容器上下或左右留边的情况。
background-size: contain; background-position: center;1
2
1
2
效果:
兼容性
虽然ie9+才支持background-size属性,但大家的智慧是无穷尽的,网上大家提供了几种解决方案,ie8及以下可以使用ie filters来模拟cover属性(据说某些情况下会有问题,本人测试过和cover效果还是有区别的):
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path_relative_to_the_HTML_file', sizingMethod='scale')";1
1
还有一种方式需引入一个jQuery插件: jquery.backgroundSize.js
大概原理就是当浏览器不支持该属性时,用
<img>标签替换
相关文章推荐
- CSS3 Background-size 详解
- CSS3基础教程:详解background-size 控制背景图的尺寸[转]
- CSS3:background-size背景图片尺寸属性
- 使用JavaScript的Canvas模拟CSS3中的background-size:cover;
- CSS3-background-size
- CSS3详解:background
- CSS3——box-sizing\background-size\box-shadow
- CSS3就可以通过background-size来设定图片大小
- background-size使用详解
- 【CSS3】---background-origin background-clip background-size
- CSS3详解:background
- css3 background-size 用法
- CSS3 background-size
- CSS3 background-size让背景图寸尺大小可控
- css3 background-size
- 让IE7 IE8支持CSS3 background-size属性
- CSS3background-size背景图片尺寸属性
- CSS3——box-sizing\background-size\box-shadow
- CSS3——box-sizing\background-size\box-shadow
- 详解background-size