BeWithYou

胡搞的技术博客

  1. 首页
  2. web前端/Javascript
  3. CSS3背景图片缩放居中

CSS3背景图片缩放居中


今天改了一个静态页面,类似于广告海报那种。有个巨幅背景图片,对于不同尺寸的竖屏手机要做兼容。

对于市面上一般的手机的屏幕长宽比来说,这张图片是高度够用的。即宽度完全适配手机宽度时,高度按比例缩放,仍然会有多余的部分。需要做到宽度适配,占满一屏,垂直居中,裁剪掉顶部和底部多余的部分。就不配图了,自行发挥想象。

用到了CSS3的background-size这个属性。看看w3school的说明:

background-size: length|percentage|cover|contain;
描述
length

设置背景图像的高度和宽度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

percentage

以父元素的百分比来设置背景图像的宽度和高度。

第一个值设置宽度,第二个值设置高度。

如果只设置一个值,则第二个值会被设置为 "auto"。

cover

把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。

背景图像的某些部分也许无法显示在背景定位区域中。

contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。

这里我们需要宽度占满,所以用background-size:cover这个属性。同时又需要垂直居中,剪裁两端,所以还要设定background-position:center;background-attachment:fixed。

body{
    background:url('bg.png') no-repeat center fixed;
    background-size:cover;
}


回到顶部