Deep understanding of CSS background and deep understanding of css

Deep understanding of CSS background and deep understanding of css
* Directory [1] background color [2] background image [3] background tile [4] background positioning [5] background Association [6] background origin [7] background cropping [8] background size [9] In front of compound background

The background is a composite attribute like the font, and it is a frequently used attribute. In CSS3, the background attribute adds new attributes while maintaining previous usage. This article will detail the background

 

Background-color background color

The background color accepts all valid colors and a keyword that makes the background transparent. For more information about color settings, see here. The background color cannot be inherited. The default value is transparent. If no color is specified for an element, the background should be transparent so that the background of its ancestor element can be visible.

Value: <color> | transparent | inherit

Initial Value: transparent

Apply to: All elements

Inheritance: None

 

Background-image background image

The background image is placed above the specified background color. However, image formats with alpha channels, such as PNG, may be partially or completely transparent, resulting in the combination of the image and the background color. In addition, if the image cannot be loaded for some reason, the background color will replace the image

Value: <url> | none | inherit

Initial Value: none

Apply to: All elements

Inheritance: None

 

Background-repeat background Tile

By default, a background image is tiled from the top left corner of an element, including the border area. Space and round are newly added to css3. Space indicates that the two ends of the background image are aligned and tiled, and the extra space is replaced by blank space. round also indicates that the two ends of the background image are aligned and tiled, but the extra space is filled by stretching itself.

[Note] the new property values firefox, safari, and IE9 of space and round are not supported by the browser.

[Note] Two values of space interval can be written for background tile, which respectively represent the horizontal and vertical axis values. However, this method is not supported by IE8-browser. Written as background-repeat: repeat no-repeat

Value: repeat | repeat-x | repeat-y | no-repeat | space | round | inherit

Initial Value: repeat

Apply to: All elements

Inheritance: None

 

Background-position background Positioning

Value: [[<percentage] | <length> | left | center | right] [<percentage>] | <length> | top | center | bottom]? ] | [[Left | center | right] | [top | center | bottom] | inherit

Initial Value: 0% 0%

Applied to: All elements

Inheritance: None

Percentage: The point relative to the element and the original image.

[Statement]

[1] keywords

X (horizontal direction ):

Left: Align the left of the graph with the left of the element.

Center: Align the center of the graph with the middle of the element

Right: Align the right of the image with the right of the element

Y (vertical ):

Top: Align the top of the graph with the top of the element

Center: Align the center of the graph with the middle of the element

Bottom: the bottom of the image and the bottom of the element are aligned.

[Note] single keyword: It can be omitted when the keyword in a certain direction is center.

[2] specific value

X (horizontal direction ):

The positive value moves from left to right, and the negative value moves from right to left.

Y (vertical ):

The positive value moves from top to bottom, and the negative value moves from bottom to top.

[Note] the upper left corner of the page is the origin (0, 0 ).

[Note] the part of the background image removed from the element range is not displayed.

[3] Percentage

X % (horizontal direction ):

X % of the element corresponding to the background image

Y % (vertical ):

Y % of the background image corresponds to y % of the element

[Note] If only one value is written, the other value will be 50%.

Background-attachment background Association

Value: scroll | fixed | inherit

Initial Value: scroll

Apply to: All elements

Inheritance: None

Scroll: the background image will move as the rest of the page scroll. However, if it is a scrollable element, the background image will not scroll with the element content (default)

Fixed: the original image does not scroll along with the document, and the placement of the original image is determined by the size of the visible area, rather than the size of the elements containing the image or the position in the visible area. In a browser, the visible area may change as the user adjusts the size of the browser window. This will cause the original background image to move as the window size changes. In a sense, the image is not fixed, but it is fixed without changing the visible area size.

[Note] IE6-the browser cannot handle fixed relationships on non-body elements.

Local: the background image will move as the rest of the page scroll. However, if it is a scrollable element, the background image will scroll along with the element content.

[Note] the local attribute value IE8 is not supported by the browser.

 

Background-origin (not supported by IE8-browser)

The background origin attribute is used to determine the reference origin of the background positioning attribute, that is, the origin of the background image positioning. By default, the background orientation attribute of a background image is always located at the coordinate origin in the upper left corner of the element. The origin attribute of the background can be used to change the start position of the background image based on your needs.

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

Padding-box: default value. It determines the starting position of the background position. The background image is displayed starting from the outer edge of the padding.

Border-box: determines the starting position of background positioning. The background image is displayed from the outer edge of border.

Content-box: determines the starting position of the background positioning. The background image is displayed from the outer edge of the content.

[Note] If you set background-attachment to fixed, background-origin will not work.

 

Background-clip background cropping (not supported by IE8-browser)

The background cropping attribute is used to define the cropping area of the background image. Similar to the attribute of the background origin

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

Supports text attributes in the webkit kernel.

-Webkit-background-clip: text;

In combination with the-webkit-text-fill-color: transparent; attribute, the text color can present the background image effect.

 

Background-size background size (not supported by IE8-browser)

You can use the background-size attribute to specify the size of the background image, which can be used to control the horizontal and vertical scaling of the background image, or to control the way the image is stretched to overwrite the background area, you can even capture background images. The background image can adapt the size of the element box to the background image that is fully adapted to the module size, avoiding the need to design different background images due to different block sizes.

The background size features the following purposes: ensure that the background image can always adapt to the container size in the Fluid layout or responsive layout; For tiled repetitive background images, this ensures that the background image does not have any truncation effect. In the Fluid layout, the background image is scaled to forge the multi-column partition effect. This solution solves the problem of background image blur in double pixels of the Retina screen; the background image of the link or list element can be scaled together with the text.

When the background size attribute is a fixed value or percentage value, you can set two values or one value. When only one value is used, the width of the background image is specified. The second value is equivalent to auto, that is, the height is specified. In this case, after the auto value is set, the background image height can be automatically scaled proportionally.

Background-size: auto | <length> | <percentage> | cover | contain

Auto: default value. The original height and width of the background image are maintained.

<Length>: returns an integer.

<Percentage>: calculate the percentage, relative to the width of the element and the sum of padding.

Cover: enlarge the background image to fit the entire container. However, this method will cause distortion of the background image. Usually works with background-position: center to create full screen background effects. The disadvantage is that you need to make a large enough background image. Otherwise, the background image will be distorted in a large-resolution browser.

Contain: Maintain the width ratio of the background image, and scale the background image to the width or height to adapt to the region of the defined background container.

 

Background multi-background (IE8-not supported by browsers)

Before using CSS3, each container can only specify one background image. Therefore, each time you need to add a background image, you must add at least one container to accommodate it. Displaying additional images with pseudo elements is actually embedding HTML tags to transform multi-background images. Using pseudo elements such as after and before to generate additional elements to place the background images, on the surface, it is cleaner than directly Nested HTML tags, but it is actually not modified

With the multi-background attribute of CSS3, HTML tags do not need to be modified. All background images to be used are listed in the background-image or background attribute of CSS, separated by commas. Each image has attributes in the background.

CSS3 multi-background is divided into layers. It is specified from top to bottom according to the order in which images are stacked when displayed in the browser. The first declared background image will be placed at the top, the last specified background image will be placed at the bottom layer.

In addition to the background color, you can set multiple attribute values for other attributes, provided that the element has multiple background images.

For browsers that are not compatible with multiple backgrounds, the multi-Background attribute is written behind a single background attribute, and the single background image must be indeed available. This is a common solution compatible with CSS3 multi-background features.

Background: [background-image] | [background-color] | [background-position] [/background-size] | [background-repeat] | [background-attachment] | [background-origin] | [background-clip], *

[Note] If there is only one value for background-origin and background-clip, the value is background-clip. If there are two values, the first value is background-origin, followed by background-clip

[Note] All background attributes cannot be inherited.