CSS-background

background a the CSS shorthand property, disposable centrally define one or more context attributes: background-clip , background-color , background-image , background-origin , background-position , background-repeat , background-size and background-attachment .
For all abbreviated attributes, any unspecified value will be set to their initial value .

grammar

background can set one or more background layers, and multiple background layers are separated by commas.

syntax of each layer is as follows:

1. In each layer, the following values can appear 0 or 1 times, and can be placed in any order:

background-attachment
background-image
background-position
background-size
background-repeat

1. background-size can only background-position , separated by "/", such as: " center/80% ";
2. background-clip and background-origin may appear 0, 1, or 2 times. If it appears once, it sets background-origin and background-clip at the same time. If it appears twice, the background-origin is set for the first occurrence, and the background-clip is set for the second occurrence.
3. background-color can only be defined on the last attribute of background, because the entire element has only one background color.

A few keywords

inherit

The inherit keyword makes the element get the calculated value of the parent element. It can be applied to any CSS property, including the CSS abbreviation all. Inheritance always comes from the parent element in the document tree, even if the parent element is not a containing block.

• For inherited properties, inherit only enhances the default behavior of the property, and is only used when overloading other rules.
• For non-inherited properties, the behavior specified by inherit usually does not make much sense, and initial or unset is generally used instead.

initial

The initial keyword applies the initial or default value of the attribute to the element, restoring the attribute to its initial state. It can be applied to any CSS property, including CSS abbreviation all. The initial value should not be confused with the value specified by the browser style sheet.

• For inherited properties, the initial keyword has no effect. Should consider using inherit, unset, or revert (en-US) keywords instead.

unset

The unset keyword can be applied to any CSS property, including the CSS shorthand property all.

• For inherited properties, the unset keyword behaves like inherit, resetting the property to the inherited value.
• For non-inherited attributes, the behavior of the unset keyword is similar to initial, and the attribute is reset to its initial value.

transparent

transparent is used to specify a fully transparent color, similar to a value such as rgba(0, 0, 0, 0).
In CSS1, transparent is used as a parameter value of background-color to indicate that the background is transparent.
In CSS2, border-color and color began to support transparent as parameter values.
In CSS3, transparent is extended to any property that has a color value and can be used.

Attributes

background-attachment

The background-attachment property determines whether the position of the background image is fixed in the viewport or scrolls with the block containing it.

/* 关键 属性值 */
background-attachment: scroll; /* 初始值 */
background-attachment: fixed;
background-attachment: local;

/* 全局 属性值 */
background-attachment: inherit;
background-attachment: initial;
background-attachment: unset;

fixed
Indicates that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background will not scroll with the content of the element.

local
Indicates that the background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll with the content of the element, and the drawing area and positioning area of the background are relative to the scrollable area instead of the border that contains it.

scroll
Indicates that the background is fixed relative to the element itself, rather than scrolling with its content (valid for element borders).

background-clip

background-clip defines the area of the background image, whether it extends to the border, margin box, and content box.

If the background image (background-image) or background color (background-color) is not set, then this property can only see the visual effect when the border (border) is set to non-solid, transparent or semi-transparent (and border-style or border-image), otherwise, the style changes generated by this property will be covered by the border.

/* 关键 属性值 */
background-clip: border-box; /* 初始值 */
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* 全局 属性值 */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

border-box
The background extends to the outer edge of the border (but below the border).

padding-box
The background extends to the outer edge of the padding. Will not be drawn to the border.

content-box
The background is clipped to the outer edge of the content box.

text
The background is cropped to the foreground color of the text.

background-origin

background-origin defines the starting point of the background-position of the background image.

When background-attachment is fixed, this attribute will be ignored and will not work.

/* 关键 属性值 */
background-origin: border-box;
background-origin: padding-box; /* 初始值 */
background-origin: content-box;

/* 全局 属性值 */
background-origin: inherit;

border-box
The placement of the background image is based on the border area

padding-box
The placement of the background image is based on the padding area

content-box
The placement of the background image is based on the content area

background-color

background-color will set the background color of the element.

/* 关键 属性值 */
background-color: red;

/* Hexadecimal 属性值 */
background-color: #000;

/* RGB 属性值 */
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.1);

/* HSLA 属性值 */
background-color: hsla(50, 33%, 25%, 0.75);

/* 特殊 关键 属性值 */
background-color: currentColor;
background-color: transparent; /* 初始值 */

/* 全局 属性值 */
background-color: inherit;
background-color: initial;
background-color: unset;

currentColor
Set the current font color as the background color;

transparent
Set the transparent background color.

background-image

The background-image attribute is used to set one or more background images for an element. Separate multiple backgrounds with commas.
When drawing, the images are stacked in the z-direction. The map set first will be drawn on top of the map specified later, so the first map set is "closest to the user". Then the border of the element will be drawn above the background image, and the background-color will be drawn below the background image.

/**
 * url()
 */
background-image: url('http://xxxx/xxx.png');

/**
 * 渐变
 */
background-image: linear-gradient(to right, red, orange, yellow, green);

/**
 * element(): colonne3 是存在于页面中的一个元素id
 */
background-image: element(#colonne3);

background-image: none;

none
Indicates no background image.

url()
The background image is an image, and the image is imported through the url() method.

linear-gradient
The background image is a transitional gradient, and two or more color transitional gradients can be set through linear-gradient;

element()
The background image is a part of the page, which is introduced through the element() method;

background-position

background-position sets the initial position for each background image. This position is relative to the position layer defined by background-origin.

/* 关键 属性值 */
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/* 百分比 值 */
background-position: 25% 75%;

/* 长度 值 */
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/* 多个图片，逗号隔开 */
background-position: 0 0, center;

/* Edge offsets values */
background-position: bottom 10px right 20px;
background-position: bottom 10px right;

/* 全局 属性值 */
background-position: inherit;
background-position: initial;
background-position: unset;

• Keyword center, center the background image.
• The keywords top, left, bottom, right are used to specify the middle position of the edge of the background image (the other dimension is set to 50%).
• <length> or <percentage>. Specify the x coordinate relative to the left edge, and the y coordinate is set to 50%.
• If one value is top or bottom, then the other value should not be top or bottom.
• If one value is left or right, then the other value should not be left or right.
• +50px (align the left border of the image with the center line of the container)
  0px (the left border of the image coincides with the left border of the container)
  -100px (Move the image 100px to the left relative to the container, which means that the 100px content in the middle of the image will appear in the container)
  -200px (Move the image 200px to the left relative to the container, which means that the 100px content of the right part of the image will appear in the container)
  -250px (move the image 250px to the left relative to the container, which means that the right border of the image is aligned with the center line of the container)

If the size of the background image is the same as the container, the percentage value will always be invalid, because the "difference between the container and the image" is 0 (the image always fills the container, and the relative position of the image and the relative position of the container always coincide). In this case, you need to use an absolute value for the offset (for example, px).

background-repeat

The background-repeat attribute defines how the background image is repeated. The background image can be repeated along the horizontal axis, the vertical axis, the two axes, or not. By default, repeated images are cropped to the size of the elements, but they can be scaled (using round ) or evenly distributed (using space ).

/* 单值语法 */
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;

/* 双值语法: 水平horizontal | 垂直vertical */
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;

background-repeat: inherit;

repeat
The image will be repeated as needed to cover the entire area where the background image is located. If the size is not appropriate, the image will be cropped.

space
The image will be repeated as much as possible, but will not be cropped. The first and last images will be fixed on the corresponding edges of the element, and the white space will be evenly distributed between the images. The background-position property will be ignored, unless only one image can be displayed without cropping. Cropping will only happen in one situation, that is, the image is too large to have enough space to display an image in its entirety.

round
As the allowable space grows in size, the repeated image will stretch (without gaps) until there is enough room to add an image. When the next image is added, all current images will be compressed to make room.

no-repeat
The image will not be repeated. The position of the background image is determined by the background-position.

background-size

background-size Set the background image size. The picture can maintain its original size, or stretch to a new size, or zoom to the size of the available space of the element while maintaining its original proportions.

The background area that is not covered by the background image will display the background color set with the background-color property. If the background image is set with transparent or semi-transparent properties, the back background color will also be displayed.

/* 关键字 */
background-size: cover
background-size: contain

/* 一个值: 这个值指定图片的宽度，图片的高度隐式的为auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto /* 初始值 */

/* 两个值 */
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto;
background-size: auto 6px;

/* 逗号分隔的多个值：设置多重背景 */
background-size: auto, auto; /* 不同于background-size: auto auto */
background-size: 6px, auto, contain, 25%;

/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

cover
The background image is scaled to completely cover the background area, and part of the background image may not be visible. contain value of cover scales the background image as large as possible and maintains the aspect ratio of the image (the image will not be squashed). The background image covers the container with its full width or height. When the size of the container and the background image are different, the left/right or upper/lower part of the background image will be cropped.

contain
The background image is scaled to fit the background area completely. The background area may be partially blank. contain zoom the background as much as possible and maintain the aspect ratio of the image (the image will not be compressed). The background image will fill the container in which it is located. When the size of the background image and the container are different, the blank area (up/down or left/right) of the container will display the background color set by background-color.

auto
The background image is scaled by the ratio of the background image.