search

Home  >  Article  >  Web Front-end  >  css3 background note_html/css_WEB-ITnose

css3 background note_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:41:131416browse

css3 background

The css background mainly includes five attributes:

background-color

	background-color:transparent || <color>

Used to set the background color of the element, the default value is transparent( Transparent), the color can be specified by color name, RGB color, hls value, and hexadecimal value.

background-image

 	background-image:none || <url>

Used to set the background image of the element. The default value is none. You can use relative addresses or absolute addresses.

background-repeat

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

Used to set the laying method of the element background image in the element box model. The default value is repeat, which tiles in the X-axis and Y-axis directions at the same time. repeat-x only tiles in the x-axis direction, repeat-y only tiles in the y-axis direction, and no-repeat does not tile.

background-attachment

	background-attachment:scroll || fixed

Used to set whether the element background image is fixed. The default value is scroll, which is not fixed. fixed, fixed.

background-position

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

Used to set the position of the background image of the element. The default value is (0,0) || (0%,0%) || (left top) ,The value can be a specific percentage or numerical value, or ,keywords can be used.

In CSS3, 4 new attributes have been added.

background-origin

The background-origin attribute is mainly used to determine the reference origin of the background-position attribute, that is, to determine the starting point for positioning the background image. 

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

In older versions of browsers, the attribute values ​​are padding, border, and content.

Padding-box (padding): Default value, determines the starting position of background-position to display the background image from the outer edge of padding.

Border-box (border): Determine the starting position of background-position to display the background image from the outer edge of the border.

Content-box(content): Determines the actual position of background-position to display the background image starting from the outer edge of 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>

By default, the image starts from the upper left corner of the box padding and reaches the lower right corner of the outer edge of the 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;}

When the value is border-box, the image starts from the upper left corner of the border of the box and reaches the lower right corner of the 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;}

When the value is content-box, the image starts from the upper left corner of the content of the box and ends at the lower right corner of the border.

Note: When background-attachment is fixed, background-origin will be invalid.

background-clip

It is mainly used to define the clipping area of ​​the background image. The attribute value is similar to background-origin. 

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

The old version attribute values ​​are border and padding.
Border-box: Default value, the element background image is clipped outward from the element's border area.
Padding-box: The element background image is clipped outward from the padding area.
Content-box: The element background image is cut outward from the content area. 

<!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 is the default value, automatically cutting images outside the 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;}

When the value is padding-box, the area outside the padding is cut off. 

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;}

When the value is content-box, the area outside the content is cut off.

background-size

It is mainly used to specify the size of the background image. 

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

　auto: Default value, the original height and width of the background image will be maintained.
　d82af2074b26fcfe177e947839b5d381: Taking a specific integer value will change the size of the background image.
　42c97a047d75abc12b9b351eb8562711: The value is a percentage, and the background image size is changed according to the width of the element.
Cover: Enlarge the background image to fit the entire container. But it will cause the background image to be distorted.
Contain: Maintain the width-to-height ratio of the background image itself, and scale the background image to an area where the width or height fits the defined background.

When taking the value, you can set two or one. When taking one value, the width of the background image is specified, and the second value is equivalent to auto, which is the height. In this case, the height of the background image can be automatically scaled proportionally. 

<!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 is the default value, keeping the background image size ratio. 

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;}

Specify the width and height to change the size of the background image. 

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%;}

When specifying a percentage, the value will be based on the width and height of the box. In the above example, the width and height of the box are 300px 

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;}

When the value is cover, the background image is enlarged to fill the entire box. 

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;}

When the value is contain, the background image will be enlarged proportionally until the width or height touches the box.

多背景属性

　　在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背景完。

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：DIV_html/css_WEB-ITnose of parent-child relationship of margin collapseNext article：DIV_html/css_WEB-ITnose of parent-child relationship of margin collapse

Related articles

See more