You can set the tile, position, size…

Did not go to a detailed understanding of his each configuration item is what the specific meaning, how to use…

Take advantage of the weather today, follow the fish. Come and take a tour of the world of Background

background:background-color || background-image|| background-position [ / background-size]? || background-repeat || background-attachment || background-origin || background-clip

  • background-color: Sets the background color of the element
    • Default value:transparent
  • background-position: Sets the starting position of the background image
    • Default value:0% 0%
    • Grammar:background-position:<position> <position>]
    • The first value specifies the horizontal position and the second value specifies the vertical position
    • The second value is optional. The default value is 50%; If only one value is specified, that value will be used for the abscissa. The ordinate will default to 50%
    • Background-position Provides four parameters: Each percentage or length must be preceded by a keyword (top, bottom, left, right, or center)The direction of relative deviation. Such asbackground-position:right 10px bottom 20px;Offset the right edge by 10px to the left and the bottom edge by 20px to the top.No border
  • background-size: Sets the size of the background image
    • Default value:auto
    • Grammar:background-position:length|percentage|cover|contain
      • length([width,height=’auto’])
      • Percentage ([width,height=’auto’]): Sets the width and height of the background image to the percentage of the parent element
      • Cover: Scale the background image proportionally to completely cover the container. The background image may exceed the container
        • Background - size: 100%;: always cover the entire container with 100% X axis, Y axis may be cropped, there will be empty parts, the image is not distorted, may be shown as cover or contain
      • Contain: Scale the background image to a width or height equal to that of the container. The background image is always contained in the container
    • To set the size of more than one image, you need to provide multiple values separated by commas, such asbackground-size: 50% 25%, contain, 50px;
  • background-repeat: Sets whether and how to repeat the background image
    • Default value:repeat
    • Grammar:background-position:<repeat-style> [<repeat-style>];, you can set two values, the second value is optional; The first one is for landscape and the second one is for portrait. ;
    • Possible values:
      1. repeat-xThe background image is tiled horizontally
      2. repeat-y: The background image is tiled vertically
      3. repeat: The background image is tiled horizontally and vertically
      4. no-repeat: Background image is not tiled
      5. round: The background image automatically scales until it fits and fills the container. (range)
      6. space: The background image is tiled at the same spacing and fills the entire container or one direction. (range)
  • Background - origin: background - the positionProperty relative to which location.
    • Default value:padding-box
    • Grammar:background-origin: padding-box|border-box|content-box;
      1. Border-box: Displays the background image from the border area (including the border).
      2. Padding-box: Displays the background image from the padding-area (with padding).
      3. Content-box: Displays the background image from the Content area.
  • background-clip: Specifies the drawing area of the background
    • Default value:border-box
    • Possible values:
      1. border-box: Cuts the background from the border area (excluding the border).
      2. padding-box: Cuts the background from the padding area (without padding) and out.
      3. content-box: Cuts out the background from the Content area.
      4. text: Cuts out from the shape of the foreground content (such as text) as the clipping area to achieve a mask effect such as using the background as the fill color.

        -webkit-background-clip: text;

         -webkit-text-fill-color: transparent;
 background-size: cover;
Copy the code
    • Background-clip just roughly cuts the background and the background color
  • background-attachment: Sets whether the background image is fixed or scrolls with the rest of the page
    • Default value:scroll
    • Grammar:background-attachment : fixed | scroll | local;
      1. fixed: The background image is fixed relative to the form.
      2. scroll: The background image is fixed relative to the element, that is, the background image does not scroll when the element content scrolls, because the background image always follows the element itself. But it will scroll with the element’s ancestor element or form.
      3. local: The background image is fixed relative to the element, which means that when the element scrolls with the element, the background image will also scroll because the background image will always follow the content. (range)
  • background-image: Sets the background image for the element
    • Default value:none
    • Grammar:background-image: url() | none | inherit;
    • A picture:background-image: url(img/a.jpg); Multiple images:background-image: url(img/a.jpg),url(img/b.jpg), if there is an overlap between the background images, the front image will be overwritten on the back image;
  • background-blend-modeMix two (or more) backgrounds
    • Grammar: `background-blend-mode:normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light

| soft ultra-light | difference | exclusion | hue | saturation | color | luminosity ` ` ` CSS / * * / single value background – blend mode: normal;

/* Value, one value for each background */ Background-blend-mode: darken, luminosity; background-blend-mode: initial; background-blend-mode: inherit; background-blend-mode: unset; ` ` `Copy the code
  • Background - position - x, background - position - y: – Grammar:background-position-x : length | left | center | right;.background-position-y : length | left | center | right

Background is a compound attribute that can be set to multiple groups of attributes. Each group of attributes can be separated by commas. The background color cannot be set to multiple and can only be placed in the last group.