Deep understanding of CSS backgrounds

Table of Contents [1] background color [2] background image [3] background tile [4] background positioning [5] background correlation [6] background origin [7] background trim [8] background size [9] front of compound background

The background, like a font, is a composite property, and it is a highly used property. In CSS3, the Background property adds new related properties while preserving previous usage. This article will describe in detail the knowledge about the background

Background-color background Color

The background color accepts all legitimate colors and can also accept a keyword that makes the background transparent. Please click here for the color settings. Background colors cannot be inherited. The default value is transparent, and if an element does not have a specified color, then the background should be transparent so that the background of its ancestor elements can be visible.

Value: <color> | Transparent | Inherit

Initial value: Transparent

Applies 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, which results in a combination of the image and the background color. Also, if for some reason the image cannot be loaded, the background color will replace the image

Value: <url> | none | Inherit

Initial value: None

Applies to: all elements

Inheritance: None

Background-repeat Background Tile

The background image is padding-box from the upper-left corner of an element by default, but it is tiled from all directions, including the border area. The background tile property values in space and round are CSS3 new values. Space indicates that both sides of the background image are flush-paved, and the extra spaces are replaced with blanks; round also indicates that the background image is flush at both ends, but the extra space is filled by stretching itself.

[Note that the two new property values]space and round are not supported by Firefox, Safari, and ie9-browsers

[note] The background tile can write two values for the space interval, respectively, representing the horizontal and vertical values, but this notation is not supported by the Ie8-browser. Written as background-repeat:repeat no-repeat

Value: Repeat | Repeat-x | repeat-y | No-repeat | Space | Round | Inherit

Initial value: Repeat

Applies 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%

Applies to: all elements

Inheritance: None

Percentage: relative to the corresponding point of the element and the original image

Writing

"1" keyword

X (horizontal direction):

Left: Aligns the right side of the diagram to the left of the element

Center: Align Middle and element middle of diagram

Right: Align the left side of the graph with the right side of the element

Y (vertical direction):

Top: Aligns the top of the diagram with the top of the element

Center: Align Middle and element middle of diagram

Bottom: Align the bottom of the diagram with the bottom of the element

[note] A single keyword: omit when the keyword in One Direction is center

"2" Specific value

X (horizontal direction):

Positive values are moved from left to right, negative values move to left

Y (vertical direction):

Positive values move from top to bottom, negative values move from down

[note] The upper left corner of the page is the origin (0,0) point

[note] The background image is moved out to the outside of the element range and is not displayed

"3" percent

Percent X (horizontal):

x percent of the X-corresponding element of the background image

y% (vertical direction):

The y% of the y% corresponding element of the background image

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

Background-attachment Background Correlation

Value: Scroll | Fixed | Inherit

Initial value: Scroll

Applies to: all elements

Inheritance: None

Scroll: The background image moves as the rest of the page scrolls. But if it is an element that can be scrolled, the background image does not scroll with the content of the element (default)

Fixed: The original image does not scroll with the document, and the placement of the original image is determined by the size of the viewable area, not by the size of the element that contains the image or the position in the visual area. In the browser, the viewable area may change as the user adjusts the size of the browser window. This causes the original image of the background to move in position as the window size changes. So, in a sense, the image is not fixed, it just stays fixed without changing the size of the viewable area.

Note ie6-Browser cannot handle invariant relationships on non-body elements

Local: The background picture moves as the rest of the page scrolls. But if it is an element that can be scrolled, the background graph scrolls with the content of the element scrolling

[Note]local property value ie8-Browser does not support

Background-origin background origin (ie8-browser not supported)

The background origin attribute is mainly used to determine the reference origin of the background positioning attribute, which determines the starting point of the background image positioning. By default, the background position property of the background picture always positions the background image in the upper-left corner of the element as the origin of the coordinates. The background origin attribute can change the background image's background position starting position according to its own needs.

Background-origin:padding-box | | Border-box | | Content-box

Padding-box: Default, determines the background positioning start position from the outer edge of the padding to display the background picture

Border-box: Determines the starting position of the background position from the outer edge of the border to display the background picture

Content-box: Determines the start position of the background position from the outside edge of the content to display the background picture

[note] If Background-attachment is set to Fixed,background-origin, it will not play any role

Background-clip background trim (ie8-browser not supported)

The background Trim property is used to define the clipping area of the background image. Similar to the attributes of the background origin

Background-clip:padding-box | | Border-box | | Content-box

Support for the Text property under the WebKit kernel

-webkit-background-clip:text;

A property that mates with-webkit-text-fill-color:transparent to make the text color render the effect of the background image

Background-size Background size (ie8-browser not supported)

You can use the Background-size property to specify the size of the background picture, you can control the background picture in the horizontal and vertical two-direction scaling, you can also control how the picture stretches over the background area, and even the background image can be intercepted. Background image can be adapted to the size of the element box, to achieve the size of the module fully adapted to the background picture, to avoid the different size of the block and need to design a different background image

The features of the background dimension are used for the following purposes: in fluid layout or responsive layout, ensure that the background image always fits the size of the container, and for a tiled repeating background image, you can ensure that the background image is not truncated; scale the background image in the fluid layout to forge a multicolumn column effect To solve the problem of blurred background image under double pixel of retina screen; Use the background image of a link or list element to zoom in with the text

You can set two values when the background dimension property is a fixed value or percent value, or you can set a value. When you take only one value, you specify the width of the background picture, and the second value is auto, which specifies the height. In this case, the auto value is set so that the height of the background image is automatically scaled proportionally

Background-size:auto | | <length> | | <percentage> | | Cover | | Contain

Auto: Default value, keeps the original height and width of the background picture

<length>: Take a specific integer value

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

Cover: Enlarge the background image to fit the entire container. But this method can cause the background image to be distorted. Often with background-position:center to make full screen background effect. Disadvantage is the need to make a large enough background picture, or in a larger resolution browser will make the background picture distorted

Contain: maintains the width ratio of the background image itself, scaling the background image to a width or height that fits the area of the defined background container

Background multi-background (ie8-browser not supported)

Before using CSS3, you can specify only one background image per container, so you must add at least one container to accommodate each time you need to increase a background image. The use of pseudo-elements to display additional images is actually nested HTML tags to achieve multi-background image transformation, through: After and: Before and other pseudo-elements to create additional elements to place the background image, the surface than directly nested HTML tags more clean, but in fact, is a fresh

With CSS3 's multi-background attribute, the HTML tag does not require any modification, and the background-image or background attribute of the CSS lists all background images that need to be used, separated by commas. And each picture has properties in background.

CSS3 Multi-Background hierarchy, according to the browser display when the image is stacked in the order from top to bottom, the first declared background image will be at the top, the last specified background image will be placed at the bottom

In addition to the background color, other properties can set multiple property values, provided that the element has multiple background images

For browsers that are not compatible with multiple backgrounds, multi-background attributes are written behind a single background attribute, and it is also important to ensure that this single background image is actually available. This is a common scenario for dealing with compatible CSS3 multi-background features

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

[note] If background has only one value in Background-origin and Background-clip, the value is background-clip; if there are two values, the preceding is Background-origin, Back for Background-clip

Deep understanding of CSS backgrounds