background

The CSS background attribute is used to define the background of an HTML element.

1. Background color of the label:

background-colorThe BC background-color property is used to set the label's background color:#fff;
Copy the code

2. Clipping background:

 background-clip: border-box; (Default value)/* border-box Background is clipped to the outer border. Padding-box The background is clipped inside the border. The content-box background is cropped to the content box. * /Note: If the rounded corner property is encountered, the background is defined bybackground-clipFirst cut, then cutborder-radiusFurther cuttingCopy the code

3. Set the background image:

background-image: url(a); If the size of the image is not as large as the label size, it will be automatically tiled in horizontal and vertical directions to fill; It is best to use background images with background colors.Copy the code

4. Tile mode of background picture:

background-repeat:repeat default, tiled in both horizontal and vertical values :repeat default, tiled in both horizontal and vertical no-repeat neither tiled in horizontal nor vertical repeat-x tiled in horizontal direction repeat-y tiled in vertical direction The background image can be tiled to reduce the size of the image, improve the speed of web page accessCopy the code

5. Position of background image:

background-positionHorizontal, vertical; background-position:center top;/* Allows the most important parts of the site to be located in the middle of the site, not depending on the window */The default value is the upper left corner2.1Horizontal direction: left center right Vertical direction: top center bottom horizontal direction: left center right Vertical direction: top center bottom2.2Percentage (if only one orientation is set, the other orientation defaults50%)
 background-position:50% 50%; Aligns the midpoint of the source image with the midpoint of the element background2.3The offset of the pixel relative to the upper-left corner of the element's background (the offset of the source image is the upper-left corner)100px 200px; Specificity: before changing the offset edge: (value can only be2Is offset from the upper-left corner of the background area.background-position: 33% 20px; This means to place the source image one third of the way from the top left corner, vertically20pxNow:background-position: left 33% top 30px; Transversely offset with respect to the left boundary33%, longitudinal offset with respect to the upper boundary30px

Copy the code

6. Location of source image:

background-originProperty to determine what boundary is used to calculate the position of the source image:border- Box background is clipped to the outer border.padding- Box background is clipped inside border (border). (the default)content- Box The background is clipped to the content box.Copy the code

7. Background Association:

By default, the background image scrolls along with the scroll bar; If you don't want the background image to scroll along with the scroll bar, you can change the way the background image is associated with the scroll bar. There's one in CSS calledbackground-attachmentProperty, which is specifically used to modify the format of the associationbackground-attachment: scroll; Value: the default value is scroll. Fixed does not scroll with the scroll barCopy the code

8. Background image size:

1. Change the size of the source image:background-size:500pxAuto; (aspect ratio unchanged) /* A value: This value specifies the width of the image. The height of the image is implicitly auto */2. The image completely covers the background, and does not care about some images beyond the background area: background-size:cover; (aspect ratio unchanged) /* Zoom the background image to completely cover the background area, maybe part of the background image is 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). The background covers the container in its full width or height. When the container and the background are of different sizes, the left/right or top/bottom parts of the background will be clipped. * /3. Scale the background image to fully contain the background: background-size:contain; (aspect ratio unchanged) /* Scale the background image to fully load the background area, maybe the background area is partially blank. Contain scale the background as much as possible and keep the image width to height ratio (the image will not be compressed). The background image fills the container. When the background image is different from the container size, the empty area of the container (top/bottom or left/right) will show the background color set by background-color. * /Copy the code

9. Format of abbreviations for background properties:

background: Background color Background picture tiling mode Association mode positioning mode;background: red url(images/girl.jpg) no-repeat left bottom; Note:backgroundProperties, any of which can be omittedCopy the code

10. Difference between background image and insert image:

1.1The background image is just a decoration. It does not take up space.1.2Background pictures have positioning properties, so it is very convenient to control the position of the picture; Insert image has no positioning attribute, all control image position is not convenient.1.3The semantics of inserted images are stronger than those of background images, so if you want to be included by search engines in enterprise development, it is recommended to use inserted imagesCopy the code

11. Background image Stitching:

Train of thought

  • —- set two divs, insert the smaller div inside the larger image div, and position the smaller image

  • 2. Background location – Set the width and height of the small div to the same as the large div, and then set the background image location for the small div

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>39- Background picture exercises</title>
    <style>
      .box1 {
        width: 1024px;
        height: 768px;
        background-image: url(images/bybg.jpg);
      }
      .box2 {
        /*background-color: red; * /
        width: 1024px;
        height: 768px;
        background-image: url(images/bybottom.png);
        background-position: center bottom;
        background-repeat: no-repeat;
        /*background-position: 100px 200px; * /
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
    </div>
  </body>
</html>
Copy the code

12. The CSS Sprite

1.CSSSprite is an image composition technique that combines a number of images into one large image2.CSSSprite diagram can reduce the number of requests, as well as reduce the server processing stress3How to use CSS Sprite diagram The CSS Sprite diagram needs to be used with the background image and background positioning4Alternative font ICONS instead of Sprite diagramsCopy the code

The gradient

A gradient is a smooth transition from one color to another, most commonly used in background images;

Linear gradient

Writing style:background: linear-gradient(red, green);/* By default the gradient is from top to bottom */Define orientation:background: linear-gradient(to top ,red, green);/* Gradient from bottom to top */
   /* To right from left to right, to left from right to left, to top right 45deg gradient */Note:1.At least it needs to be delivered2There is no upper limit at most2. By default autoreturn automatically calculates the range of solid colors and gradients, but yes, we can also manually specify the format: color range; background:linear-gradient(to right, red 100px, green 200px, blue 300px);
/* Only the range after the first color is the range of the pure color, the following are the range of the gradient */
Copy the code

Radial gradient

Radial gradient: the default is to spread out from the center

background: radial-gradient(red, green);


 background: radial-gradient(at top left ,red, green);
 /* Radial gradient: You can use the at keyword to change the starting gradient position */


 background: radial-gradient(at 200px 100px ,red, green); 
 /* Radial gradient: You can change the starting gradient position by using the at position */

 background: radial-gradient(100px, red, green);  
 /* Background: radial gradient(100px at 200px 100px,red, green); /* If you need to specify both the location and the range of diffusion, the range must be written before at */
Copy the code