CSS 高级属性之 background-size、background-origin、background-clip 详解

1. background-size

1.1 概述

https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-size

• 检索或设置对象的背景图像的尺寸大小。
• 该属性提供2个参数值(特性值cover和contain除外)。
• 如果提供两个，第一个用于定义背景图像的宽度，第二个用于定义背景图像的高度。
• 如果只提供一个，该值将用于定义背景图像的宽度，第2个值默认为auto，即高度为auto，此时背景图以提供的宽度作为参照来进行等比缩放。

取值情况：

• length：用长度值指定背景图像大小。不允许负值。
• percentage：用百分比指定背景图像大小。不允许负值。
• auto： 背景图像的真实大小。
• cover： 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
• contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。

1.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

1.3 示例

<div class="bg-image"></div>

.bg-image {
  width: 300px;
  height: 300px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-image: url("https://th.bing.com/th/id/R18f60f2fa500828b92af97a4ca400740?rik=4a3ixRZt0LTEBw&riu=http%3a%2f%2fpic.netbian.com%2fuploads%2fallimg%2f170516%2f120052-1494907252e25b.jpg&ehk=GkohFw0bI5iRcJhcpzlE87DaPoGrTUiQ7j6SgBu9KvI%3d&risl=&pid=ImgRaw");
}

2. background-origin

2.1 概述

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-origin
• background-origin 规定了指定背景图片background-image 属性的原点位置的背景相对区域.
• 设置或检索对象的背景图像计算 background-position 时的参考原点(位置)

取值：

• padding-box： 从padding区域（含padding）开始显示背景图像。
• border-box： 从border区域（含border）开始显示背景图像。
• content-box： 从content区域开始显示背景图像。

2.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

2.3 示例

div {
  border: 1px solid black;
  padding: 35px;
  background-image: url('/i/bg_flower.gif');
  background-repeat: no-repeat;
  background-position: left;
}
#div1 {
  background-origin: border-box;
}
#div2 {
  background-origin: content-box;
}

3. background-clip

3.1 概述

• https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-clip
• 指定对象的背景图像向外裁剪的区域
• padding-box： 从padding区域（不含padding）开始向外裁剪背景。
• border-box： 从border区域（不含border）开始向外裁剪背景。
• content-box： 从content区域开始向外裁剪背景。
• text: 从前景内容的形状（比如文字）作为裁剪区域向外裁剪，如此即可实现使用背景作为填充色之类的遮罩效果

3.2 浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

3.3 示例