This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

introduce

Recently, when writing large screen projects, BACKGROUND is often used to write some common effects in large screen. For example, in the case of gradient, there is a background image. Gradient we all know to use line-gradient to write gradient, but it is the first time we have encountered gradient and background image, and found the strength of background. Here’s an example:

The background

Background is a shorthand property, Background-clip, background-color, background-image, background-origin, background-position, background-repeat, and background – Size and background-attachment attributes.

Background can specify multiple layers of background, in which case we use commas to separate each layer. This feature is what we use to achieve the multi-layer background effect.

Syntax for each layer

  • In each layer, the following values can occur 0 to 1 times:
    1. attachment
    2. background-image
    3. position
    4. background-size
    5. repeat-style
  • Background-size can only be used immediately after background-position/segmentation
  • Background-color can only be defined on the last property of a background because there is only one background color for the entire element

background-attachment

The background-attachment property determines whether the position of the background image is fixed within the viewport or scrolls along the block containing it

Property value: -fixed: This key property value indicates that the background is fixed with respect to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element - local: This key attribute value indicates that the background is fixed relative to the content of the element. If an element has a rolling mechanism, background will be followed by the contents of the element, and the background of the drawing area and location area is not relative to the scrollable area include their border - scroll: the key attribute value fixed background relative to the element itself, rather than as the content of the rolling element (for border is effective)Copy the code

background-origin

Background-origin specifies the relative background area of the origin position of the background image

Attribute values: - border-box: displays the background image based on the border area. - padding-box: displays the background image based on the padding area. - content-box: displays the background image based on the content areaCopy the code

background-clip

Backgroun-clip sets whether the background or color of an element extends to the border, inside margin box, below the content box, or the foreground color that is clipped to text

Property values: - border-box: background extends to the outside of the border (at the bottom of the border) - padding-box: background extends to the outside of the inside margin (not drawn to the outside of the border) - Content-box: background is clipped to the outside of the content area - text: foreground color where background is clipped to textCopy the code

use

In the project, the abbreviation of background attribute is mainly used, which is more convenient and easier to read in the case of understanding. The following is an example:

    background:
      url('.. /assets/img/blockDecoration.png')
      repeat-x
      bottom 0px left 0px/210px 56px.linear-gradient(180deg.rgba(0.164.255.0.25) 0%.rgba(120.214.255.0.08) 100%);
Copy the code

The main point here is to make sure that the position and width of the background image are connected and separated by /, and that when there are multiple backgrounds, separated by /. That’s what we need to do.