Background of CSS3 background-size Background-origin Background-clip

"One" background-size specifies the size of the background image

2.  div  {background : url (bg _flower.gif) ; -moz-background-size : 63px 100px ;  background-size : 63px 100px ; background-repeat : no-repeat ;}

4. < Span style= "Color:rgb (255, 0, 0); >
   

    div  { background : url (Bg_flower.gif) ; -moz-background-size : 40% 100% ;  background-size : 40% 100% ; background-repeat : no-repeat ;}

    

"Two" Background-origin Specify the location area of the background image

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

Origin's translation comes at the original meaning. As the name implies, so Background-origin is used to determine the original starting position of the image.

For example, when Content-box, the top left corner of the background image is aligned with the upper left corner of the content edge, and when Padding-box, the upper-left corner of the background image is aligned with the upper-left corner of the inner margin. The value of Background-origin really determines which area the background image begins to display from.

If you do not set any of the Background-origin properties, where is the default starting position? --padding.　　

It is important to note that this property is not valid if the background is not no-repeat. It is important that it is displayed starting from the Border-box area.

Http://www.html-5.cn/div-css/jiaocheng/2417.html

"three" Background-clip drawing area with specified background

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

Clip is intended for clipping, interception. As the name implies, Background-origin's role is to tailor the background image to fit the needs. Of course, this is not the real meaning of the picture to be cropped, but based on the value of the property. Make proper concealment of certain parts of the picture.

Depending on the part of the box you set, the image will not be visible outside the outside edge of the area. For example, the starting position of the image is starting from Border-box, but the value set by Background-clip is Content-box, so only the contents of the content area are visible, and the contents of the image outside the content are hidden away. . Even though you're letting the picture start showing from the border.

Http://www.html-5.cn/div-css/jiaocheng/2417.html

Background-clip: Border-box|padding-box|content-box

This property specifies which areas of the background can be displayed, regardless of where the background starts to draw, and where the background is drawn can appear in areas that do not display the background, as if the background image is cropped as part of the area that does not display the background.

Background-origin: Padding-box|border-box|content-box

This property specifies which area (border, filler, or content) the background is drawn from, but it only controls where the background begins to draw, and you can use this property to draw the background on the border, but the background on the border does not show that it is up to the background-clip to decide

excerpted from Http://www.jb51.net/css/65594.html

"Four" multiple background images (Pictures are overlapping)

Background-image:url (bg1.gif), url (bg2.gif);