巧用background属性实现图片居中

作者:日期:2017-11-24 14:13:18 点击:571

想必大家都常被页面居中这个问题困扰吧,这里简单分享一下一个使用background样式属性来实现图片居中的新用法。

很久以前本骚年常用image.onload()这样的方式获取图片大小再进行调整,得到图片原比例居中的效果,自从发现这个新用法,就跟长长的js代码说拜拜了。

background

background简介

background是CSS简写属性,用来集中设置各种背景属性。

background可以用来设置一个或多个属性: 
background-color, background-image, 
background-position, background-repeat, 
background-size, background-attachment, 
等等。

具体大家可以上background | MDN上查看,里面有每个值的默认值、支持值、以及浏览器的兼容性等等,这里先对成员简单做些介绍。

background-color

CSS属性中的background-color会设置元素的背景色, 属性的值为颜色值或关键字”transparent”二者选其一。

background-image

CSS background-image属性用于为一个元素设置一个或者多个背景图像。

图像在绘制时,以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。

绘制层次关系如下:

  1. 元素的borders会在background-image之上被绘制
  2. background-color会在background-image之下绘制

图像的绘制与盒子以及盒子的边框的关系,需要在CSS属性{cssxref(“background-clip”)}}和background-origin中定义,后面我们会讲到。

巧妙使用background-image除了可以拼接多图片,还可以结合渐变linear-gradient、透明度rgba()、重复方式background-repeat做出很棒的效果,具体可以参考使用CSS渐变 | MDN,效果图如下:

 

甚至是:


background-repeat

background-repeat CSS属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。

background-attachment

如果指定了background-image,那么background-attachment决定背景是在视口中固定的还是随包含它的区块滚动的。

background-position

background-position指定背景图片的初始位置。

对于每一个被设定的背景图片来说,background-position这个CSS属性设置了一个初始位置。 这个初始位置是相对于以background-origin定义的背景位置图层(padding-box|border-box|content-box)来说的,后面有讲。

关于该属性的取值,当然常用的center之外,像left|bottom|…等等,以及百分比percentage、甚至具体的值px等都是可以支持的。该属性比较简单常见,具体大家可以去background-position | MDN上查看。

background-clip

  • background-clip设置元素的背景(背景图片或颜色)是否延伸到边框下面
  • ‘border-box’: 背景延伸到边框外沿(但是在边框之下)
  • ‘padding-box’: 边框下面没有背景,即背景延伸到内边距外沿
  • ‘content-box’: 背景裁剪到内容区(content-box)外沿

background-origin

  • background-origin规定了指定背景图片background-image属性的原点位置的背景相对区域
  • ‘border-box’: 背景将会延伸到延伸到外边界的边框,而且是「边框在上、背景在下」
  • ‘padding-box’: 背景描绘在padding盒子,边框里不会有背景出现。同样,背景将会延伸到最外边界的padding
  • ‘content-box’: 背景描绘在内容区范围

background-clip与background-origin

这是两个很相似的CSS属性,前面也提到了几遍了,主要是用来设置背景与border/padding等关系的。

乍一看两者怎么都长一样,但是有个关键性的区别是:background-clip对多余内容进行裁剪,而background-origin则会调整位置保证效果。

background-size

background-size设置背景图片大小。 
这个看起来很不起眼的属性,其实正是后面我们进行图片居中的关键。

除了基本的length值、percentage值,background-size还有几个很棒的值:

  • auto: 以背景图片的比例缩放背景图片。
  • cover: 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
  • contain: 缩放背景图片以完全装入背景区,可能背景区部分空白

背景区由前面提到的background-origin设置,默认为盒模型的内容区与内边距,也可设置为只有内容区,或者还包括边框。 
如果attachment为fixed,背景区为浏览器可视区(即视口),不包括滚动条。不能为负值。

下面简单分享一下图片居中的很棒的方法。

图片居中新用法

组合使用background

图片居中

经过上面简单的讲解每个属性的效果,我们可以得到以下的一个样式设置:

.img-contain{
  background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

这样,不管

的宽高怎么设置,需要显示的图片都会按原比例自动缩放以全部刚好包含在
里面。

 

图片填充

如果需要背景图片按比例拉伸来占满

(不留白),我们可以调整background-size:

 

.img-cover{
  background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}.
border和padding

如果有边框,我们可以配合background-clip或background-origin来使用,具体自行回放上面内容。

使用

我们可以这样使用:

<div class="img-contain" style="background-image: url(your_image_url)"></div>
<div class="img-cover" style="background-image: url(your_image_url)"></div>

聪明的你肯定发现了,这样的使用方法有个问题: 
作为背景的图片是撑不起元素的,故这里我们需要给div手动添加宽高:

<div class="img-contain" style="background-image: url(your_image_url); width: 400px; height: 300px;"></div>
<div class="img-cover" style="background-image: url(your_image_url); width: 400px; height: 300px;"></div>

其实如果我们在页面内统一对每个模块(像这里的

)设置了宽高,这里的问题就不需要考虑的。

 

当然这样处理的话,有个比较不方便的地方就是,我们再也没办法右键下载和保存图片了。还有别忘了浏览器兼容,相信大家可以各种出招解决掉的。

代码实现

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    div{
      width: 500px;
      height: 300px;
      border: solid 2px red;
      background-color: white;
      background-image: url('http://o905ne85q.bkt.clouddn.com/5df2bea83bbf3a90ca130c70.jpg')
    }
  .img-contain{
  background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .img-cover{
  background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

  }
  </style>
</head>
<body>
  <h1>图片居中</h1>
  <div class="img-contain"></div>
  <h1>图片填充</h1>
  <div class="img-cover"></div>
</body>
</html>

具体效果如下:

上一篇: 巧用background属性实现图片居中

下一篇: 使用JavaScript实现下载文件