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:

< ;/div>

Preview effect:

CSS3 background positioning origin background- This is where origin is introduced to you, I hope it can be helpful to you. For more content about CSS3, please pay attention to the CSS3 updates of Menglong Station. Thank you for your long-term support of Menglong Station.

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