CSS3背景样式详解（图像大小，图像位置等）

背景样式

在 CSS3 中，新增了 3 个背景属性

属性	说明
background-size	背景大小
background-origin	背景位置
background-clip	背景剪切

background-size 属性

概念：在 CSS3 之前，我们是不能用 CSS 来控制背景图片大小的，背景图片的大小都是由图片实际大小确定的。

但在 CSS3 中，可以用 background-size 属性来定义背景图片的大小。

特点

• 图片可以保有其原有的尺寸，
• 图片拉伸到新的尺寸，
• 图片在保持其原有比例的同时缩放到元素的可用空间的尺寸

语法:：

background-size:属性值；

常用属性值

属性值	说明
像素值	设置背景图像的宽度和高度。只能为 正值。如果设置 2 个属性值，则第 1 个属性值定义宽度，第 2 个属性值定义高度。如果只设置 1 个属性值，则表示宽度，而高度则等比例缩放
百分比	以 父元素的百分比 来设置背景图像的宽度和高度。只能为 正值 。如果设置 2 个属性值，第一个属性值设置 宽度 ，第二个属性值定义 高度。如果只设置 1 个属性值，该属性值表示宽度，而高度则等比例缩放
auto	定义背景图像按照 原始尺寸 表示
cover	即“覆盖”，表示把背景图像等比例缩放到完全覆盖背景区域。背景图像的某些部分也许无法在背景定位区域中。和 contain 相反，cover值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景以它的全部宽或者高覆盖所在容器。当容器和背景图像大小不同时，背景图的左 / 右或者上 / 下部分会被裁剪
contain	即”容纳“，表示把背景图像等比例缩放到 宽度或高度与 容器 的宽度或高度相等时 ，以使背景图像位于区域内，但可能使背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图片不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小不同时，容器的空白区域（上 / 下或者左 / 右）会显示由 background-color 设置的背景颜色

注意：没有被背景图片覆盖的背景区域仍然会显示用 background-color 属性设置的背景颜色。此外，如果背景图片设置了透明或者半透明属性，衬在背景图片后面的背景色也会显示出来

单张图片的背景大小可以使用以下方法中的一种来规定：

• 使用关键字contain
• 使用关键字cover
• 设定宽度和高度值

当通过宽度和高度来定义尺寸时，可以提供一或者两个数值:

• 当通过宽度和高度值来设定尺寸时，你可以提供一或者两个数值：
• 如果仅有一个数值被给定，这个数值将作为宽度值大小，高度值将被设定为 auto。
• 如果有两个数值被给定，第一个将作为宽度值大小，第二个作为高度值大小。

每个值都可以是 像素值 还是 百分比, 或者 auto

实例：

DOCTYPE html>
html>
	head>
		meta charset="utf-8">
		title>背景图片的大小title>
		style type="text/css">
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:1px solid green;
				margin:20px;
				background-image:url('../ 边框样式 /image/son.jpg');
				background-repeat:no-repeat;
			}
			.a{
				background-size:200px 150px;
			}
			.b{
				background-size:100% 100%; 
			}
			.c{
				background-size:auto;
			}
			.d{
				background-size:cover;
			}
			.e{
				background-size:contain;
			}
		
		style>	
	head>
	body>
		div class="a">div>
		div class="b">div>
		div class="c">div>
		div class="d">div>
		div class="e">div>
	body>
html>

运行结果

注意：背景图片跟普通图片（即是 img 标签）是不同的东西。width 跟 height 这两个属性只能用来定义 img 标签图片的大小，而不能用于控制背景图片的大小

background-origin 属性

概念：默认情况下，background-position 属性总是以 元素左上角 为坐标原点定位背景图像。

在 CSS3 中，可以使用 background-origin 属性来定义背景图片是从什么地方开始平铺的，也就是定义背景图片 background-image 属性的原点位置的背景相对区域

语法：

background-origin:属性值;

说明

属性值

属性值	说明
border-box	从 边框区域（含边框）开始显示背景图像
padding-box	默认值，从 内边距区域（含内边距）开始显示背景图像
content-box	从 内容区域（含内容）开始显示背景图像

注意：当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用

边框区域，内边距区域和内容区显示如图

实例：

DOCTYPE html>
html>
	head>
		meta charset="utf-8">
		title>背景图片位置title>
		style>
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:10px solid green;
				margin:20px;
				padding:20px;
				background-image:url('../ 边框样式 /image/border.png');
				background-repeat:no-repeat;
				text-align-last: center;
				line-height:150px;
				font-size:20px;
			
			}
			.a{
				background-origin:border-box;
			}
			.b{
				background-origin:padding-box;
			}
			.c{
				background-origin:content-box;
			}
		style>
	head>
	body>
		div class="a">border-boxdiv>
		div class="b">padding-boxdiv>
		div class="c">content-boxdiv>
	body>
html>

运行结果

实际上，background-origin 属性的本质是：定义 background-position 属性相对于什么位置来定位。如果没有设置 background-position, 因此浏览器会采用默认值，即 ”background-position:top left”。

background-clip 属性

概念：background-clip 属性用于定义背景图片的裁剪区域

语法：

background-clip:属性值;

属性值

属性	说明
border-box	默认值，从 边框区域 开始向外裁剪背景图像
padding-box	从 内边距区域 开始向外裁剪背景图像
content-box	从 内容区域 开始向外裁剪背景图像
text	背景被裁剪成文字的前景色

边框区域，内边距区域和内容区显示如图

实例：

DOCTYPE html>
html>
	head>
		meta charset="utf-8">
		title>裁剪图像title>
		style>
			div{
				display:inline-block;
				width:200px;
				height:150px;
				border:10px dotted green;
				margin:20px;
				padding:20px;
				background-image:url('../ 边框样式 /image/son.jpg');
				background-repeat:no-repeat;
				text-align-last: center;
				line-height:150px;
				font-size:20px;
				color:white;
			}
			.a{
				background-clip:border-box;
			}
			.b{ 
				background-clip:padding-box;
			}
			.c{
				background-clip:content-box;
			}
			.d{
				background-clip:text;
				color:rgba(0,255,255,0.6);
			}
		style>
	head>
	body>
		div class="a">border-boxdiv>
		div class="b">padding-boxdiv>
		div class="c">content-boxdiv>
		div class="d">textdiv>
html>

运行结果

多重背景图像

概念：

所谓的 多重背景图像，指的是该元素的背景图像不止一张

在 CSS3 之前版本中，一个容器中只能填充一幅背景图像，如果重复设置，后设置的背景图像会覆盖之前的背景图像

但在 CSS3 的背景图像功能增强了很多，允许在一个容器里显示多幅背景图像，使背景图像效果更容易控制。

CSS3 中没有为实现多重背景图像提供对应的属性，而是通过 background 这个复合属性来实现多重背景图像的效果，各属性值之间用英文逗号（,）隔开。

实例：

DOCTYPE html>
html>
	head>
		meta charset="utf-8">
		title>多重背景图像title>
		style>
			div{
				width:1200px;
				height:800px;
				border:1px solid blueviolet;
				background:url("../ 边框样式 /image/fish4.png") left center no-repeat ,url("../ 边框样式 /image/fish.png") top center no-repeat;

			}
		style>
	head>
	body>
		div>div>
	body>
html>

运行结果

除了运用 background 复合属性，也可以通过 background 属性的子属下 background-image、background-repeat、background-position 等属性提供多个属性值来实现多重背景图像的效果

	background:url("../ 边框样式 /image/fish4.png") left center no-repeat ,url("../ 边框样式 /image/fish.png") top center no-repeat;


	background-image: url("../ 边框样式 /image/fish4.png"),url("../ 边框样式 /image/fish.png");
	background-repeat:no-repeat;
	background-position:left center,top center;
	background-size:40%;

这两者是等价的，运行效果都一致的。

说明：多重背景图像在实际开发中，不建议使用多张背景图片，因为每多一张图片就会多引发一次 HTTP 请求，势必影响页面加载速度