学透CSS-万字长文助学图片属性（中）-attachment、clip、repeat、size等 连载中

这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

读不在三更五鼓，功只怕一曝十寒。看完以为有收获的，点个赞呗！！！

前言

上文咱们介绍了，背景图片以及渐变，可是仅仅学会那点，只是背景图片的九牛一毛，本文要介绍的backdround-* 你们族，也是背景图片变幻无穷的基石。

background-repeat ：如何平铺背景图片。

语法

单值语法

background-repeat：属性值；

repeat：在两个方向上平铺图像。这是默认值。

background-image: url('./juejin.png');
background-repeat: repeat;
复制代码

repeat-x: 水平平铺图像

background-image: url('./juejin.png');
background-repeat: repeat-x;
复制代码

repeat-y: 垂直平铺图像

background-image: url('./juejin.png');
background-repeat: repeat-y;
复制代码

no-repeat: 不要平铺，只显示一次图像

background-image: url('./juejin.png');
background-repeat: no-repeat;
复制代码

space：在两个方向上平铺图像。除非单个图像太大而没法容纳，不然不裁剪图像。若是能够容纳多个图像，请将它们隔开，使图像始终接触边缘。

仔细看，repeat的时候，最后一个图像是没有显示全的，使用space会自动增长图像的间距，以前的最后一图像显示全了。

round：在两个方向上平铺图像。除非单个图像太大而没法容纳，不然切勿裁剪图像。若是多个图像能够容纳剩余空间，请将它们压扁或拉伸以填充空间。若是剩下的图像宽度小于一半，则拉伸，若是大于，则拉伸。

先看下正常的状况，右边和下边都显示不全，右边的明显小于图片的通常，下边明显大于图片一半

width: 190px;
 height: 110px;
background-image: url('./juejin.png');
background-repeat: repeat;
复制代码

下面再来看一下使用round的效果 明显能够看见最右侧的一列没有了，下边的一行显示的全。

两值语法

两个值的语法：

/* background-repeat: horizontal vertical */
   background-repeat: repeat space;
   background-repeat: repeat repeat;
   background-repeat: round space;
}
复制代码

background-attachment ：背景图片是否固定或随着滚动移动。

属性值

scroll

背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，由于背景图像老是要跟着元素自己。但会随元素的祖先元素或窗体一块儿滚动。

fixed

背景图像相对于窗体固定

local

背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动

background-position ：背景图片的位置。

定义

在其容器内移动背景图像（或渐变）。

语法

两个值

两个值时，第一个值是水平偏移量，第二个值是垂直偏移量。

长度值（例如100px 5px）

百分比（例如50% 5%）

关键字（例如top right）

单值

该值是水平偏移量。浏览器将垂直偏移设置为center

三/四个值

语法以下：

background-position: top/bottom/right/bottom 100px top/bottom/right/bottom;// 第四个默认为0；
background-position: top/bottom/right/bottom 100px top/bottom/right/bottom 20px;

复制代码

注意不能同时出现 bottom和top,或者 right/bottom,由于这是不符合常理的。

background-size ：设置背景图片的大小。

前言

我的认为，这是CSS属性中最复杂属性之一，由于他支持的语法特别多，可是这个语法也是特别简单的，比较容易记的。

语法

特定值

auto

默认值，浏览器根据图片的实际大小和纵横比自动计算大小

// 背景图片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: auto;
复制代码

cover

确保图像始终覆盖整个容器，即便它必须拉伸图像或切掉一个边缘。

// 背景图片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: cover;
复制代码

contain

浏览器会保持图片的宽高比，而后拉伸到合适的大小，最终保证宽或者高等于容器，而且是始终显示整个图像，

// 背景图片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: contain;
复制代码

这里由于容器的宽高一致，图片的高度是大于宽度的，因此浏览器优先拉伸高度，致使宽度有空白

单值

只提供一个值（例如background-size: 400px），它会计算宽度，而高度设置为auto。你能够使用任何你喜欢的CSS大小单位，包括像素、百分比、em、视口单位等。

双值

若是提供两个值，第一个设置背景图像的宽度，第二个设置高度。与单值语法同样，能够使用任何您喜欢的度量单位。

多张图片尺寸

语法

background-image: 图片1,图片2，......;
background-size: 图片1尺寸, 图片2尺寸.....;
复制代码

width: 200px;
      height: 200px;

      background-image: url("./bk.jpg"),url('./juejin.png');
      background-repeat: no-repeat;
      background-size: 30px 30px, 60px 60px;
复制代码

background-orgin： 背景图片的起点位置

前言

这里标题中写了背景图片的起点位置，是有特殊意义的，由于这个属性对背景颜色没有效果

border: dashed 5px rgba(20,81,154,0.5);
  width: 200px;
  height: 200px;
  background-origin: content-box;
  background-color: aqua;
  background-size: 250px 250px; */
  padding: 20px;
复制代码

这里设置起点位置是content-box,可是并无生效

属性值

border-box

从border做为起点 仔细看图，你会发现，图片是从左上角内容开始的，整个图片都在border-box下。

padding-box

从边框做为起点 仔细看图，你会发现，图片是从左上角padding开始的，而且右边和下边仍是在border区域的。

content-box

从content做为起点 仔细看图，你会发现，图片是从左上角内容开始的，而且右边和下边仍是在border区域的。

background-clip 对图片和背景色的裁剪

前言

这个属性和上面的background-origin 乍一看特别像，属性值都如出一辙， 不过从标题中咱们最早肯定的是clip会对背景颜色生效。

属性值

border-box

整个元素

padding-box

content-box

从内容区域开始裁剪

background-clip: content-box;
 background-color: aqua;
 background-image: url();
复制代码