Shulou(Shulou.com)06/01 Report--

This article is about how to use background in Css. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

1. Background-color

All elements can set the background color.

The default value for background-color is transparent;, that is, if an element does not specify a background color, the background is transparent so that the background of its ancestor element is visible.

2. Background-image

All elements can set the background image

Multiple background images can be set, separated by commas; the background images will be cascading and written on top of the previous layer.

3. Background-repeat

Repeat (default) / no-repeat/repeat-x/ repeat-y

4. Background-attachment

Scroll (default) / fixed

5. Background-position

Pixel method: starting from the upper-left corner of the image, the first value is the distance of horizontal movement, and the second value is the distance of vertical movement; if only one value is specified, the second value defaults to 50%.

Percentage method: the percentage is applied to both the image and the element, and the corresponding points coincide for positioning. If you specify only one percentage, it means that the vertical direction is 50%.

Keyword method: top, right, bottom, left, center for combined positioning; if only one value is specified, the second value defaults to center.

Note: background-position can be negative.

By default, the background color extends below the border, and the background image is in the upper-left corner of the padding area.

6. Background-size

Sets the size of the background image; the default is auto.

Pixel method: the first value sets the width, the second value sets the height; if there is only one value, the second value is auto.

Percentage method: calculated on the basis of the width and height of the parent element.

The keyword cover, which does not change the width-height ratio of the image, covers the entire element horizontally and vertically, which may cause part of the image to overflow.

The keyword contain, which does not change the width-height ratio of the image, stretches as much as possible until the entire element is covered in one direction, which may lead to unpaved in the other direction.

7. Background-origin

Define the initial position of the background image

Border-box, the upper left corner of the border.

The upper left corner of the padding-box,padding area; default value.

Content-box, the upper left corner of the content area.

8. Background-clip

The CSS3 background-clip property specifies the painting area of the background.

The property takes three different values:

Border-box-(default) the background is painted to the outside edge of the border

Padding-box-the background is painted to the outside edge of the padding

Content-box-the background is painted within the content box

(it is explained more clearly in English)

(English is all transported from W3Schools Online)

As for background-origin and background-clip, they are independent of each other and do not interfere with each other.

With regard to the CSS writing of background, I think it should be logical and hierarchical; specifically:

Background defines the background image, background-color defines the background color, and background-clip defines the background display area.

Thank you for reading! This is the end of the article on "how to use background in Css". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.