单聊background-repeat

作者：大漠 日期：2016-09-29 点击：1999
background
CSS3

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

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

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

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

回顾background-repeat的使用

在CSS2.1中background-repeat具有四个属性值repeat、repeat-x、repat-y和no-repeat。先简单的回顾一下。

repeat

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

body {
    background: url("https://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-y和repeat-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属性新增了两个属性，那就是round和space。接下来看看这两者怎么使用。

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>可以有x和y的值，比如:

  • 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取值是，可以将x和y的值任意组合，比如round space、space round、round repeat-y之类的。别的不说，我们来看一个round space的组合：

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

改为background-position

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

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

总结

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

大漠

常用昵称“大漠”，W3CPlus创始人，目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验，尤其专注对CSS3的研究，是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3：核心技术与案例实战》。

如需转载，烦请注明出处：http://www.w3cplus.com/css3/css3-background-repeat-space-round.html

返回顶部