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

This article mainly explains the "background summary of CSS". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn the background summary of CSS.

All background properties cannot be inherited.

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.

(personal opinion, for reference only)

Full Size Background Image

If we want to have a background image on a website that covers the entire browser window at all times.

The requirements are as follows:

Fill the entire page with the image (no white space)

Scale image as needed

Center image on page

Do not cause scrollbars

The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:

CSS Code copies content to the clipboard

Html {

Background: url (img_flower.jpg) no-repeat center fixed

Background-size: cover

}

Little tips:

The wavy frame effect is realized by using the horizontal tiling of the background image.

Thank you for your reading, the above is the content of "background Summary of CSS". After the study of this article, I believe you have a deeper understanding of the background summary of CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.