suchen

Heim  >  Artikel  >  Web-Frontend  >  css3 背景记_html/css_WEB-ITnose

css3 背景记_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:41:131419Durchsuche

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:默认值，将保持背景图片的原始高度和宽度。
　　:取具体的整数值，将改变背景图片大小。
　　:取值为百分值，根据元素的宽度改变背景图片大小。
　　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背景完。

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：margin collapse 之父子关系的DIV_html/css_WEB-ITnoseNächster Artikel：自定义表单样式之checkbox和radio_html/css_WEB-ITnose

In Verbindung stehende Artikel

Mehr sehen