CSS3 background positioning origin background-origin_html/css_WEB-ITnose

Background positioning origin background-origin is a newly added attribute related to the background in CSS3, which mainly changes the starting origin position of the background. CSS3 background positioning origin background-origin has three attribute values: border, padding and content. The following will introduce the background positioning origin of CSS3, background-origin, around the three attribute values.

1. The syntax of background-origin

1. The syntax of background-origin

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

2. Attribute value of background-origin

(1) padding-box: This value is the default value of background-origin, which determines the starting position of background-position. Display the background image starting from the outer edge of the padding (the inner edge of the border);

(2) border-box: This value determines the starting position of the background-position. Display the background image starting from the outer edge of the border;

(3) content-box: This value determines the starting position of the background-position to display the background image starting from the outer edge of the content (the inner edge of the padding);

2. Compatibility of background-origin

1. Compatibility of background-origin

2. Compatibility of background-origin Writing

/*Gecko*/

-moz-background-origin: padding-box || border-box || content-box; /*Webkit*/ -webkit-background-origin: padding-box || border-box || content-box; /*Presto*/ -o-background-origin: padding-box || border-box || content-box; /*W3c Standard*/ background-origin: padding-box || border-box || content-box;

3. Example of background-origin (in Google Browse (Preview effect)

1. padding-box effect

CSS code:

div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0 ,0.3);padding:20px;

-webkit-background-origin: padding-box; /*This is the default position*/ }

HTML code:

Preview effect :

2. Border-box effect

CSS code:

div {width:200px;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0 ,0,0.3);padding:20px;

-webkit-background-origin: border-box; }

HTML code:

3. Content-box effect

CSS code:

div {width:200px ;height:200px;background:url("http://www.leemagnum.com/img/logo.jpg") no-repeat;border:20px solid rgba(0,0,0,0.3);padding:20px; -webkit-background-origin: content-box; }

HTML code: