剑客
关注科技互联网

单聊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("https://source.unsplash.com/W_9mOGUwR08/200x200") repeat;
}

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

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

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

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

单聊background-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 。当然他们的组合,你将看到不同的效果,感兴趣的同学可以自己尝试一下。

单聊background-repeat

大漠

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

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址