CSS background color_html/css_WEB-ITnose

Color background

The background color in CSS is determined by background-color. The background color here will render padding and content, but not the border and margin parts.

In css3, you can use background-clip to define the rendering area of ​​the color: the values ​​are content-box (rendering only the content part), padding-box (rendering the content and padding part) and border-box (rendering content, padding);

During the testing process, it was found that padding-box and border-box have the same rendering effect. I don’t know why there are these two values? Please let me know how to test the difference between these two values.

Image background

Use an image as the background by specifying background-image:url(image) in css.

In css3, you can use background-size to specify the size of the background image, for example: background-size: 200px 300px,

You can also use background-clip to specify the background image area, the value is content -box (only renders the content part), padding-box (renders the content and padding parts) and border-box (renders the content and padding);

You can also use background-origin to specify the positioning area of ​​the background image, The values ​​are content-box (positioned according to content), padding-box (positioned according to padding) and border-box (positioned according to border)