What are the new background properties of css3 and how to use them

This article "css3 what new background attributes and how to use" most people do not understand, so the editor summarized the following content, detailed, clear steps, with a certain reference value, I hope you can get something after reading this article, let's take a look at this "css3 has what new background attributes and how to use" article it.

Css3 adds three new background attributes: 1, background-clip, which specifies the area where the background image of the object is cut outward; 2, background-origin, which specifies where the background image is displayed; and 3, background-size, which specifies the size of the background image.

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Background attributes added by css3

Property describes the area where the CSSbackground-clip specifies that the background image of the object is cropped outward. 3background-origin sets or retrieves the reference origin (location) of the background image of an object when calculating the background-position. 3background-size retrieves or sets the size of the background image of an object. three

1. Background-size: specify the background image size

Before CSS3, the size of the background picture was determined by the actual size of the picture. In CSS3, you can specify the size of the background image, which allows us to reuse the background image in different environments. You can specify the size in pixels or percentage. If the size is specified as a percentage, the dimension is relative to the width and height of the parent element.

Div {background:url (img_flwr.gif); background-size:80px 60px

2. Background-origin: specify where the background image is displayed.

Background pictures can be placed in the content-box, padding-box, or border-box area.

Div {background-image:url ('smiley.gif'); background-repeat:no-repeat;background-position:left;background-origin:content-box;}

3. Background-clip: specify where to start clipping the background image

Div {background-color:yellow;background-clip:content-box;} above is the content of this article on "what are the new background attributes of css3 and how to use it?" I believe you all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.