单聊background-repeat

发布于 大漠

background-repeatbackground属性之一,对于前端而言,这是再熟悉不过的属性之一了。那么为什么今天要来聊这个background-repeat属性呢?

在CSS2.1中,众所周知,background-repeat属性具有四个常见的值repeatrepeat-xrepeat-yno-repeat。而今天要说不是这四个属性值,在CSS Backgrounds and Borders Module Level 3中,给background-repeat新增加了两个属性值roundspace。在接下的中,要讨论的就是新增的这两个属性值怎么使用,他们具有什么特性。

别的先不说,先来background-repeat各属性值对应的效果:

点击示例中的按钮,可以看到background-repeat对应属性值效果。

回顾background-repeat的使用

在CSS2.1中background-repeat具有四个属性值repeatrepeat-xrepat-yno-repeat。先简单的回顾一下。

repeat

background-repeat取值为repeat时,表示背景图片沿容器的X轴和Y轴平铺。将会平铺满整个容器。例如:

body {
    background: url("//source.unsplash.com/W_9mOGUwR08/200x200") repeat;
}

这里采用了background的简写方法,如果单一使用的话将是:

body {
    ...
    background-repeat: repeat;
}

最终看到的效果将如下所示:

当使用background-repeat取值为repeat时,如果背景图片的尺寸和容器尺寸不能完全匹配之时,会造成背景图片不全,如下图所示:

repeat

repeat-x

repeat-x可以说是repeat的分值之一,表示背景图片沿容器的X轴平铺。

body {
    ...
    background-repeat: repeat-x;
}

效果如下:

使用repeat-x只是会让背景图片沿容器x轴平铺,和repeat有点类似,有可能在容器最右侧不具备背景图片展示的空间。

repeat-y

repeat-yrepeat-x类似,不同的是,repeat-y让背景图片沿容器Y轴方向平铺背景图片。

body {
    ...
    background-repeat: repeat-y;
}

效果如下:

同样的道理,如果使用repeat-y有可能造成容器底部没有足够的空间展示整个背景图片。

no-repeat

no-repeat刚好和repeat相反,表示背景图片不做任何平铺,也就是说背景图片有多大,在容器显示出来的效果就有多大。

body {
    ...
    background-repeat: no-repeat;
}

效果如下:

使用no-repeat时也会有背景图片显示不全的情况,那就是当容器的尺寸小于背景图片尺寸的时候。

round 和 space

在CSS3中给background-repeat属性新增了两个属性,那就是roundspace。接下来看看这两者怎么使用。

round

background-repeat取值为round时,会像repeat一样,背景图片会平铺整个容器,但和repeat不一样的是,他会根据容器尺寸和图片尺寸做一个自适应处理,不会像repeat一样,造成图片显示不全。

当图片重铺的次数不适合一个整数时,会重新调整,使图片按整数平铺在整个容器中。类似于background-size一样会自动计算背景图片尺寸。假设我们有一个520 x 320的容器,背景图片尺寸是一个100 x 100的,那么他会在x轴平铺5次,在y轴平铺3次,其计算如下:

round(520 / 100) = round(5.2) = 5
round(320 / 100) = round(3.2) = 3

比如下面一个效果:

从效果中可以看到,取值为round时和repeat不一样,它的最右侧和最底部不会有类似于repeat一样,背景图片显示不全。

space

background-repeat取值为space时,和round又会不一样,但也有类似之处。类似之处是,背景图片会平铺整个容器,不会造成背景图片裁剪;但也和round将不一样,使用space时,不够整数背景图片平铺整个容器的时候,会将剩余的空间平均分配给相邻背景之间。假设我们的容器是520 x 320,而背景图片的尺寸是100 x 100。那么水平方向将会平铺5张背景图,而相邻两张背景图之间会有一个20 / 5 = 4间距。同样道理,在垂直方向会有一个20 / 2 = 10的间距。来看一个效果:

不同的x和y轴的repeat值

从规范中,我们可以获得<repeat-style>可以有xy的值,比如:

  • repeat 相当于repeat repeat
  • repeat-x 相当于repeat-x no-repeat
  • repeat-y 相当于no-repeat repeat
  • space 相当于space space
  • round相当于round round
  • no-repeat相当于no-repeat no-repeat

也就是说,在background-repeat取值是,可以将xy的值任意组合,比如round spacespace roundround repeat-y之类的。别的不说,我们来看一个round space的组合:

当然,你要是感兴趣,也可以尝试其他的组合效果。这里不做过多的演示。

改为background-position

上面我们看到的效果都是background-position取值为0 0的效果,在实际当中,background-position取值不同的对background-repeat的效果也将会有一定的影响,比如下面的示例:

所以说在实际使用之中,在使用background-repeat时,也要考虑到background其它的属性情况。

总结

这篇文章简单的聊了一下CSS中background-repeat的属性值,特别介绍了CSS3给background-repeat新增值roundspace的使用方法以及其差别。或许你会问,他们适合什么样的场景之时,我想你会有一定的参考值,如果想让你的背景图避免在容器中平铺不裁剪时,你会采用round值,如果你想容器中的背景图片中平铺时,想让背景图不能填充满整个容器有一定的间距时,你将会采用space。当然他们的组合,你将看到不同的效果,感兴趣的同学可以自己尝试一下。Shop Nike Apparel, Shoes and Accessories