您所在的位置:小祥子 » 编程 » CSS » 正文

css3 背景记

时间:2015-07-13 编辑:枫小炀 来源:CnBlogs

CSS3-">css3 背景

  css背景主要包括五个属性:

background-color

	background-color:transparent || <color>

  用来设置元素的背景颜色,默认值为transparent(透明),可用颜色名,RGB色,hls值,十六进制值指定颜色。

background-image

 	background-image:none || <url>

  用来设置元素的背景图片,默认值为none,可以用相对地址,也可以用绝对地址。

background-repeat

	background-repeat:repeat || repeat-x || repeat-y || no-repeat

  用来设置元素背景图片在元素盒模型中的铺放方式,默认值为repeat,往X轴与Y轴方向同时平铺,repeat-x只x轴方向平铺,repeat-y只y轴反向平铺,no-repeat不平铺。

background-attachment

	background-attachment:scroll || fixed

  用来设置元素背景图片是否固定。默认值为scroll,不固定。fixed,固定。

background-position

	background-position:<percentage> || <length> || [left | center | right] [,top | center | bottom]

  用来设置元素背景图片的位置,默认值为(0,0) || (0%,0%) || (left top),其值可以是具体的百分数或数值,也可以使用关键词。

  在css3中,又新增了4个属性。

background-origin

  background-origin属性主要用来决定background-position属性的参考原点,即决定背景图片定位的起点。

background-origin:padding-box || border-box || content-box

  在浏览器的老版本中,属性值分别为padding,border,content。

  padding-box(padding):默认值,决定background-position起始位置从padding的外边缘开始显示背景图片。

  border-box(border):决定background-position起始位置从border的外边缘开始显示背景图片。

  content-box(content):决定background-position其实位置从content的外边缘开始显示背景图片。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
	div{
		width: 100px;
		height: 100px;
		border:10px dashed;
		padding:10px;
		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
		background-origin:padding-box;
	}
</style>
</head>
<body>
	<div></div>
</body>
</html>

  默认情况,图片以盒子padding的左上角为起点,直到border外边缘的右下角。

div{
	width: 100px;
	height: 100px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-origin:border-box;
}     

  当值为border-box时,图片以盒子的border左上角为起点,直到border右下角。

div{
	width: 100px;
	height: 100px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-origin:content-box;
}

  当值为content-box时,图片以盒子的content左上角为起点,直至border右下角。

注意:当backgroun-attachment为fixed时,background-origin将无效。

background-clip

  主要用来定义背景图片的剪切区域,属性值与background-origin类似。

background-clip:border-box || padding-box || content-box

  老版本属性值为border,padding。
  border-box:默认值,元素背景图像从元素的border区域向外剪切。
  padding-box:元素背景图像从padding区域向外剪切。
  content-box:元素背景图像从content区域向外剪切。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
	div{
		width: 100px;
		height: 100px;
		border:10px dashed;
		padding:10px;
		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
		background-origin:border-box;
		background-clip:border-box;
	}
</style>
</head>
<body>
	<div></div>
</body>
</html>

  border-box是默认值,自动剪切border之外的图像。

div{
	width: 100px;
	height: 100px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-origin:border-box;
	background-clip:padding-box;
}

  当值为padding-box时,padding之外的区域被剪掉。

div{
	width: 100px;
	height: 100px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-origin:border-box;
	background-clip:content-box;
}

  当值为content-box时,content之外的区域被剪掉。

background-size

  主要用来指定背景图片的尺寸。

background-size:auto || <length> || <perentage> || cover || contain

  auto:默认值,将保持背景图片的原始高度和宽度。
  <length>:取具体的整数值,将改变背景图片大小。
  <percentage>:取值为百分值,根据元素的宽度改变背景图片大小。
  cover:将背景图片放大,以适合铺满整个容器。但会导致背景图片失真。
  contain:保持背景图片本身的宽高比例,将背景图片缩放到宽度或高度正适应所定义背景的区域。

  取值时可以设置两个,也可以设置一个。取一个值时,指定了背景图片的宽度,第二个值相当于auto,也就是高度。这种情况,能够让背景图片的高度自动按照比例缩放。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
	div{
		width: 300px;
		height: 200px;
		border:10px dashed;
		padding:10px;
		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
		background-size:auto;
	}
</style>
</head>
<body>
	<div></div>
</body>
</html>

  auto是默认值,保持背景图片大小比例。

div{
	width: 300px;
	height: 200px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-size:250px 200px;
}

  指定宽高,改变背景图片大小。

div{
	width: 300px;
	height: 200px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-size:50% 50%;
}

  指定百分比时,将根据盒子宽高取值。上例中盒子宽高为300px X 200px,设置背景图片宽高为50%,那么背景图片就等于150px X 100px。

div{
	width: 300px;
	height: 200px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-size:cover;
}

  取值为cover时,背景图片放大填充整个盒子。

div{
	width: 300px;
	height: 200px;
	border:10px dashed;
	padding:10px;
	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;
	background-size:contain;
}

  取值为contain时,背景图片成比例放大,直至宽或高抵住盒子。

多背景属性

  在css3之前,每个容器只能指定一张背景图片,因此每当需要增加一张背景图片时,必须增加一个容器来容纳它。早期使用嵌套div容器显示特定背景的做法不是很复杂,但是它明显难以管理。它让html标记更加复杂,同时也会增加页面文件大小。如果要增加某个图片效果,不仅需要修改css还需要修改html代码。
  通过css3的多背景属性,html标记就不需要任何修改,在css的background-image或则background属性中列出需要使用的所有背景图片,用逗号隔开。而且每张图片都具有background中的属性,例如可以重复,改变大小等。

background:[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] ,*  

  也可以把缩写拆为以下形式。

background-image:url1,url2,...,urlN;
background-repeat:repeat1,repeat2,...,repeatN;
background-position:position1,position2,...,positionN;
background-size:size1,size2,...,sizeN;
background-attachment:attachment1,attachment2,...,attachmentN;
background-clip:clip1,clip2,...,clipN;
background-origin:origin1,origin2,...,originN;
background-color:color;  

  除了backgroun-color之外,其他的属性都可以设置多个属性值,不过前提是元素有多个背景图片存在。多个属性值之间必须使用逗号隔开。

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style>
	div{
		width: 300px;
		height: 200px;
		border:10px dashed;
		padding:10px;
		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left top / 50% 50%,
			   url(https://img.alicdn.com/imgextra/i4/2406102577/TB2HT.RdFXXXXclXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right top / 50% 50%,
			   url(https://img.alicdn.com/imgextra/i4/2406102577/TB2TxlhdVXXXXXxXXXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right bottom / 50% 50%,
			   url(https://img.alicdn.com/imgextra/i3/2406102577/TB2orQSdFXXXXb_XpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left bottom / 50% 50%;
		background-color:#ff0000;
	}
</style>
</head>
<body>
	<div></div>
</body>
</html>

  background-color属性只能有一个,切记,切记。

  css3背景完。

关键词:背景