最近项目正好有用到CSS3的background-size属性,就抽空的研究下。以前网站很少会使用到这个属性,背景图片和父元素的宽高都是固定的,主要是因为以前网站只在PC上显示所以都采用固定式布局!但是现在的网站都要考虑在多种设备(比如手机、平板)上如何较好的显示,这样就需要背景图片的尺寸能够灵活的进行改变,使用background-size属性可以在某些方面简单的处理这类问题。
先看下W3C对此属性的语法说明:
从上图中可看出此属性一共有4种类型的属性值:length(设置尺寸)、percentage(百分比)、cover(扩展覆盖)、contain(自动缩放到适应)。下面会对这四种属性值类型进行测试和说明。
这是演示中使用的背景图片bg-earth.jpg,宽高为200px*199px:
演示代码中的背景图片父元素宽高都固定为400px*200px。父元素的样式如下:
<style type="text/css">
.container {
width: 400px;
height: 200px;
background-image: url(bg-earth.jpg);
background-repeat: no-repeat;
border: 3px solid #0000ff;
}
</style>
这里展示两种尺寸的来进行对比,首先是800px*300px:
<div class="container" style="background-size: 800px 300px;"></div>
背景图片尺寸超出了父元素的最大尺寸,导致超出部分被隐藏,图片也变形了。然后看下设置尺寸为100px*200px:
<div class="container" style="background-size: 100px 200px;"></div>
背景图片宽度小于父元素,所以被压窄了。
这里同样使用两种不同百分比进行对比,先看下设置成百分百的:
<div class="container" style="background-size: 100% 100%;"></div>
可以看到正好填满整个父元素,接下来看使用宽50%,高60%进行缩放:
<div class="container" style="background-size: 50% 60%;"></div>
背景图宽=父元素的宽*50%,高=父元素的高*60%。
先看下演示代码和结果图:
<div class="container" style="background-size: cover;"></div>
使用cover会有很多种情况,但可以肯定的是,cover一定会将背景图片覆盖满整个元素,无论背景图的大小如何。
如果背景图片的宽度小于父元素宽度,则图片宽度进行压缩,反之则进行拉伸,高度也是一样的。所以如果尺寸差别太大会造成图片严重变形,但是好处就是被填充的元素背景会没有空白。
此外注意一点,背景图超出父元素的备份会被隐藏掉。
其实就是背景图会根据自身的宽高比例进行缩放,好处是图片不会严重变形,造成太扁或者太窄,但是缺点也很明显,很容易导致背景有空白。演示代码:
<div class="container" style="background-size: contain;"></div>
可以看到背景图片是完全没有变形的,依然按照本身尺寸比例进行缩小,如果父元素的宽高允许的话则会进行放大。
作者:十有三
出处:https://shiyousan.com/post/635925364929848548
版权声明:本文采用知识共享许可协议:署名-相同方式共享 4.0 国际(CC BY-SA 4.0)。欢迎转载本文,转载请声明出处或保留此段声明。