background

Background is a shorthand property that can define one or more properties in a single declaration. Attributes can be placed anywhere except for specific attributes.

Background: grammar

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

CSS3 background supports multiple backgrounds, mainly by using Origin, clip and size to form new background multiple times

Pay attention to

  • backgroundProperty when multiple background layers are specified, separate each background layer with a comma. Each attribute is separated by a space
  • If you havesizeMust be followed by the value ofposition, separated by /
  • background-colorOnly one value can be set and is contained in the last layer
  • border-box/padding-box/content-boxSet at the same time if it occurs onceoriginandclipIf the first is specified twiceorigin, the second designationclip
  • Multiple backgrounds, other attributes have only one attribute value indicating that all backgrounds share the same attribute value

background-color

Background-color sets the element’s background color. The value of the property is either the color value or the keyword “transparent”. Background-color has a lower priority than background-image. If both backound-color and background-image exist, the image will be displayed above the color

/* Keyword values */ background-color: red; /* Hexadecimal value */ background-color: #bbff00; /* RGB value */ background-color: rgb(255, 255, 128); /* HSLA value */ background-color: HSLA (50, 33%, 25%, 0.75); /* Special keyword values */ background-color: currentColor; background-color: transparent; /* Global values */ background-color: inherit; background-color: initial; background-color: unset;Copy the code

background-image

The background-image attribute sets one or more background images for an element, separated by ‘,’.

Background - image: url (" xx ") | | linear - gradient (gradient) | | none (no background)

/* html */ <div class="border-image-color"></div> /* css */ .border-image-color { width: 500px; height: 400px; border: 20px dashed yellowgreen; background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.imag e); background-repeat: no-repeat; background-origin: border-box; background-color: lightSkyBlue; background-position: -60px -20px; }Copy the code

Pay attention to

  • background-imageThe drawing direction is stacked on the z-axis. The image specified first is followed by the specified image
  • background-imagePainted onborderContrast,background-colorOn top of
  • background-imageDraw, display position andbackground-position,background-clip,background-originrelated

background-origin

Background-origin specifies the relative background area of the origin position of the background-image attribute, and sets the initial position of background-position. However, when background-attachment is fixed, this attribute will be ignored and does not take effect.

Property value: Default /padding-box

  • Border-box Background images are placed in the border area as reference
  • Padding-box The layout of the background image is based on the padding area
  • The placement of background images in the Content-box is based on the content area

background-position

Background-position sets the initial position of each background image. The origin of background-position is the position defined by background-origin, and the relative offset is based on the origin.

Property value: Default value /left top

The three value types can be mixed

  • The keyword
    • centerUsed to center the background image
    • left,rightSpecifies that the image is placed on the left and right edges of the X axis
    • top,bottomSpecifies that the image is placed on the upper and lower edges of the Y-axis
  • The length value + ‘px’ specifies the position relative to X and Y coordinates
  • Percentage Specifies the percentage relative to the X and Y coordinates

Number of values

  • The keyword takes a single value, and the other location defaults to Center
  • The value of length and percentage specifies the X and Y coordinates
  • Length and percentage are two values. The first value defines the direction of the X axis and the second value defines the direction of the Y axis
  • Position: bottom 10px right 20px; The keyword defines the position, and the length/percentage defines the distance

extension

The background-position property has been extended to allow us to specify the offset of the background image from any Angle as long as we specify the keyword (top,bottom,left,right) before the offset (length/percentage).

Percentage with grammar

The offset of the percentage value specifies that the relative position of the image coincides with the relative position of the container. A value of 0% means that the (upper left) edge of the image coincides with the (upper left) edge of the container, and a value of 100% means that the right (or lower) edge of the image coincides with the right (or lower) edge of the container. A value of 50% means that the image’s midpoint coincides with the container’s midpoint.

Percentage formula:

(container width - image width) * (position x%) = (x offset value)

(container height - image height) * (position y%) = (y offset value) 　　 

/* HTML */ <div class="border-image-color"></div> Box-sizing = background-origin If you want to move X 20px: 20px/(742px-642px) = 20%, move the actual pixel value: (742px-642px) * 20% = 20px where background-Origin is the padding-box and the actual container width should be the part of the container that the origin controls when wrapping the image, subtract the border 40px, which is 702px. (702px-642px) * 20% = 12px */. Border-image-color {box-sizing: border-box; width: 742px; height: 400px; border: 20px dashed yellowgreen; background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.imag e); background-repeat: no-repeat; background-origin: border-box; background-color: lightSkyBlue; background-position: 20% 0px; }Copy the code

background-size

Background-size Sets the size of the background image. Images can remain the same size, be stretched to a new size, or be scaled to the available space of the element while maintaining their original proportions

Property value: Default value /auto auto

  • The keyword
    • Auto Scales the background image to the scale of the background image.
    • Cover Zooms the background image to fully cover the background area, possibly partially invisible. In contrast to contain, cover scales the background image as much as possible and keeps the image in proportion to its width and height (the image won’t be squashed)
    • Scale the background image to fully contain the background area, it may be partially empty. Scale the background as much as possible and keep the image width to height ratio (the image will not be compressed)

  • Length specifies the width and height of the background image. It cannot be negative
  • Percentage Specifies the percentage relative to the background imagepositionOf container width and height). Background area bybackground-originSet up the

background-repeat

The background-repeat property defines how the background image is repeated. The background image can be repeated along the horizontal axis, vertical axis, both axes, or not at all.

attribute define
repeat The image is repeated as needed to cover the entire area of the background image. The last image is clipped if it is not of the right size. Repeat -x, repeat-y specifies a single direction repeat
space Images are repeated as much as possible, but not cropped. The first and last images are fixed to the corresponding edges of the elements, and white space is evenly distributed between the images. Background-position is ignored unless only one image can be displayed unclipped. Clipping occurs only when the image is so large that there is not enough space to display an image in its entirety.
round As the allowed space grows in size, the image being repeated will stretch out (without gaps) until there is enough space to add an image. After the next image is added, all current images are compressed to make room. For example, an image that was originally 260px May be stretched to 300px after being repeated three times until another image is added. So they can be compressed down to 225px.
no-repeat The image will not be duplicated (because the area of the background image may not be completely covered). The position of the unduplicated background image is determined by the background-position property.

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.

Attribute values

  • Fixed indicates that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element
  • Local means that the background is fixed relative to the content of the element. If an element has a scrolling mechanism, the background will scroll along with the content of the element, and the drawing and positioning areas of the background are relative to the scrollable areas rather than the borders that contain them.
  • The Scroll background is fixed relative to the element itself, rather than scrolling with its contents (this is valid for element borders).

background-clip

Background-clip Sets whether the element’s background (background image or color) extends below the border

Value: Default value /border-box

  • Border-box background extends to the outer edge of the border (but below the border)
  • The padding-box background extends to the outer edge of the padding. It’s not drawn to the border
  • The Content-box background is clipped to the edge of the Content box
  • The text background is clipped to the foreground color of the text, which should be set to when the property value is text-webkit-background-clip, the font color uses the background color i.ecolor: transparent/-webkit-text-fill-color: transparent;
/* html */ <div class="border-image-color"> text </div> /* css */ .border-image-color { box-sizing: border-box; width: 642px; height: 400px; font-size: 100px; line-height: 300px; text-align: center; border: 20px dashed yellowgreen; background-image: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.imag e); background-repeat: no-repeat; background-origin: border-box; -webkit-background-clip: text; color: transparent; }Copy the code

Multiple background example

Working scene: The bottom of the official website homepage is covered with different pictures, and then the basic picture text typesetting is carried out on the pictures

Multiple background processing can avoid redundant and empty HTML elements to overlay images, and avoid pseudo elements and pseudo classes for redundant position positioning (if there are more than two background images, it is also difficult to use pseudo classes and pseudo elements).

<div class="section"> </div class="section"> </div class="section">  /* css */ .border-image-color { display: flex; flex-direction: column; box-sizing: border-box; width: 600px; height: 580px; border: 1px solid yellowgreen; text-align: center; background: url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/20/170f5f4c42de2970~tplv-t2oaga2asx-image.imag e) 0px 0px, url(https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/19/170f20b3c106f518~tplv-t2oaga2asx-image.imag e) 0px 250px; background-size: contain 250px; background-repeat: no-repeat; } .section { width: 400px; height: 200px; line-height: 200px; margin: 30px auto; text-align: center; Background - color: rgba (0, 0, 8). color: #fff; }Copy the code