background

Background-repeat Image tiling mode

• Repeat image repeats horizontally and vertically (default)
• The repeat-x image repeats horizontally
• The repeat-y image repeats vertically
• No – don’t repeat repeat
• Round image automatically scales until the entire node is filled (may cause distortion)
• The space image is tiled at the same spacing and fills the entire node

Background attribute concatenation

• background: -color -image -repeat -attachment -position/-size
• There is no mandatory standard for the sequence of attributes, that is, background: -repeat -position/-size – image-color; Can also be
• The image level is higher than color, and the order of the concatenation does not affect this level
• Background location and background size are separated by “/”, because these two attributes can use length units as the value, and cannot be distinguished in serial writing. For example, “BACKGROUND: #66f 100px 100px” in the “100px 100px” indicates the location, and size will not be declared

Background-attachment Image attachment mode

• The scroll image moves with the page, i.e., following the node (default)
• Fixed image will not move with the scrolling of the page, equivalent to a fixed position on the page, the part of the image beyond the node after the scrolling will be hidden

Background-size Image size mode

• Auto Sets the size automatically (default)
• The cover image remains large enough to cover the entire area, and some parts of the image may not be displayed in the area
• Contain does not maintain a vertical/horizontal ratio, so that its width and height fill the entire area. This can cause image distortion
• Size Indicates the size in any length unit. If the second height is not specified, the default value is auto

Background-position Indicates the starting position of the image

• The default is “0% 0%”
• Any unit of length can be used. The second value (Y-axis) defaults to “50%” when not stated.
• Keyword: available keyword “left right top bottom”, second value undeclared default is “auto”

Background-origin Location area (used in conjunction with background-position)

• Padding-box Image position relative to fill (default)
• Border-box Image positioning relative to the border
• Content-box image localization relative to content

Background-blending-mode Blend mode, usually used in combination with background-color

• Normal: normal (default)
• Color-burn The color is darker
• Color-dodge Indicates the color dodge
• Color color
• Darken dimming
• Lighten up
• Difference difference
• Exclusion rule out
• Hard – light, light
• Soft, light light
• Hue hue
• Luminosity brightness
• Multiply by four
• Overlay overlay
• Saturation degree of saturation
• Screen screen

Background-clip Draws regions (including background colors)

• The border-box image is cropped to the border of the border and margin (default)
• The padding-box image is clipped to the border between the fill and the border
• The content-box image is clipped to the boundary between the content and the fill

The gradient

Linear-gradient linear gradient

Change color gradually from start to finish in the specified direction. The gradient shape is a straight line

Use grammar:

background-image: linear-gradient(direction, color-stop);
Copy the code

1. Direction the direction

   • I left/right/top/bottom; To bottom is from top to bottom, to right bottom is from top left to bottom

   • Angle; A: 90deg, 135deg, to right bottom; By default, 180deg is equivalent to to bottom. Reference:

   • 

   • As can be seen from this figure, the direction order of CSS property serialization actually conforms to the rule of “top right, bottom left”, such as: padding, margin, etc

2. Color – stop color code
   • Color Specifies the color used to create the gradient effect at the specified position
   • Position that begins the gradient of the next color at the specified position or completes the gradient of the previous color to the current color

Example:

/* * #f66 0%, #66f 100% refers to the initial position of the background color #f66, the end position of the background color # 66F * and from the initial position to the end position of the background color #f66 to # 66F gradient effect * When the gradient direction is to top, that is, from bottom to top, the initial position is the bottom, The end position is the top * color standard value can be multiple, such as background-image: Linear-gradient (to Top, Red 0%, green 50%, blue 100%) */
div {
  width: 800px;
  height: 500px;
  background-image: linear-gradient(to top, #f66 0%.#66f 100%);
}
Copy the code

Effect:

Radial gradient

Change color gradually from the center of the circle outward in any direction. The gradient shape is a circle or oval

Use grammar:

background-image: radial-gradient(shape size at position, color-stop);
Copy the code

1. Shape shape
   • Ellipse ellipse (default)
   • Circle the round
2. The size size

   • Note: the size value refers to the completion of the gradient within the value range; If the length unit is 100px 100px at center, the gradient is completed in an area with a width and height of 100px and starts at the center of the area. The default value is Position center. In, for example, apap-side at center, the gradual process is completed in a circle or ellipse that corresponds to the value

   • Apsarp-corner The distance from the center of the circle to the farthest Angle from the center of the circle is the radius (default)
   • The distance from the center of the circle to the farthest side is the radius
   • Closest -corner The distance from the center of the circle to the closest Angle to the center is the radius
   • Closest -side The distance from the center of a circle to the closest side of the center is the radius
   • Size can be any length unit, width and height must be specified at the same time
3. The position location
   • Keyword left, right, top, bottom, center, default center
   • Any unit of length
4. Color – stop color code
   • The usage is the same as linear gradient mark

Example:

div {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background-image: radial-gradient(farthest-side at center, red 0%, yellow 50%, green 100%);
  box-shadow: -15px 15px 40px rgba(0.0.0.0.5);
}
Copy the code

Effect:

other

Gradient attributes can be written in multiple sets, such as background-image: Linear-gradient (), linear-gradient();

1. Conic-gradient: a gradual change of color from a circle to the outside in a clockwise direction. The shape of the gradient is a cone. It is not compatible and has no practical application, so it is not introduced
2. Repeating-linear-gradient, as can be seen from the name, is repeated linear gradient, that is, repeated linear gradient knows to fill nodes
3. Repeating-radial -gradient, repeating-Conic-gradient, the same

demo

1. Background grid

Implementation principle: declare two linear-gradients to produce two images containing triangles; Declare background-position so that two images are misaligned, and the triangles of the two images can overlap to form a square; Declare background-size to set the size of two images; Finally, since background-repeat defaults to repeat, the image is tiled until the nodes are full

Code:

/* * Linear-gradient (45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%) * The first 25% of the area has a background color of #eee, and the #eee to Transparent gradient happens in place at 25% of the location * Then the transparent to transparent gradient happens at 25% of the location to 75% of the location * Finally, The gradient from transparent to #eee takes place at 75% of the position. After 75% of the position, the gradient no longer takes place, so the last 25% of the area will have a background color of #eee *. 25% to 75% of the area is transparent, and the last 25% is the background color #eee */
div {
  width: 500px;
  height: 300px;
  background-image: linear-gradient(45deg.#eee 25%, transparent 25%, transparent 75%.#eee 75%), linear-gradient(45deg.#eee 25%, transparent 25%, transparent 75%.#eee 75%);
  background-position: 0 0.20px 20px;
  background-size: 40px 40px;
}
Copy the code

Effect:

2. The grid background

Implementation principle: consistent with the grid background implementation principle

Code:

div {
  width: 500px;
  height: 300px;
  background-color: #3c9;
  background-image: linear-gradient(to top, #fff 5%, transparent 10%), linear-gradient(to right, #fff 5%, transparent 10%);
  background-position: 0 0.20px 20px;
  background-size: 20px 20px;
}
Copy the code

Effect: