First, the background color background-color

  • Property name: background-color
  • What it Does: Adds a background color modifier to the box area
  • Load area: Load the background color in and around the border
  • Property value: color name, color value
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } .box { width: 200px; height: 200px; padding: 30px; border: 5px dashed red; margin: 20px; background-color: slateblue; } < / style > < / head > < body > < div class = "box" > background color < / div > < / body > < / HTML >Copy the code

2. Background-image

  • Attribute name: background-image
  • What it Does: Adds image background to the box
  • Loading range: the default loading range is within the border. If the image is not loaded repeatedly, the loading starts from within the border
  • Property value: URL (image path)
  • Url: Uniform Resource Locator (URL). The path to find the image is written inside the brackets
.box { width: 200px; height: 200px; padding: 30px; border: 5px dashed red; margin: 20px; /* background-color: slateblue; Background color */ background-image: URL (images/jingzheng.jpg); }Copy the code
  • If the image is not duplicated, start loading from within the border
  • The background image and the background color can be set at the same time. The background image overlays the background color, and the area without the background image shows the background color

Third, background repeat background-repeat

  • Attribute name: background-repeat
  • Effect: Sets whether the added background image should be loaded repeatedly in the box
  • There are four reloading methods, depending on the attribute value

| | attribute value function | | repeat | repeat, the default attribute values, says it will use the background picture reloading background region to fill the entire box | | no – repeat | not repeat, regardless of whether the background is greater than the box range, Pictures are only loaded once | | repeat repeat – x | level, use a background image level reloading covered the first row, vertical direction is not repeated | | vertical repeat, repeat, y | use background image vertical reloading covered the first column, horizontal not repeat |

.box { width: 200px; height: 200px; padding: 30px; border: 5px dashed red; margin: 20px; /* background-color: slateblue; Background color */ background-image: URL (images/lagou_small.jpg); /* background-repeat: repeat; */ /* background-repeat: no-repeat; */ /* background-repeat: repeat-x; */ background-repeat: repeat-y; }Copy the code

4. Background positioning background-position

  • Attribute name: background-position
  • Purpose: This function is used to set the loading position of non-repeating images in the background area
  • Attribute value: divided into three writing methods, word representation, pixel representation, percentage representation. Either way you write it
  • Property values have two, separated by Spaces
  • The first property value: represents the horizontal position of the background image
  • Second property value: represents the vertical position of the background image

(1) Word representation

  • Attribute values are written using directional words
  • Horizontal optional words: left, center, right
  • Vertical optional words: top, center, bottom
  • Words indicate that the picture is aligned with the box background area in the corresponding direction
background-position: right bottom; /* align */ in the corresponding directionCopy the code

2, pixel representation

  • Use the pixel value as the attribute value for background positioning
  • The first attribute value: the number of pixels, which represents the horizontal displacement of the upper-left corner of the background image against the upper-left vertex within the border
  • The second attribute value: the number of pixels, which represents the vertical displacement of the upper left corner of the background image against the upper left vertex within the border
background-position: 50px 50px;
Copy the code

Pixel values distinguish positive and negative, which represent different displacement directions:

  • Positive: indicates that the picture moves to the right and down from the origin of the box
  • Negative: indicates that the picture moves left or up from the origin of the box

Percentage notation uses percentage numbers as attribute values

  • Values of 100% :
  • Horizontal, equivalent to the width of the background area within the border of the box minus the width of the image
  • Vertical, equivalent to the height of the background area within the border of the box minus the height of the image

Background attachment

  • Attribute name: background-attachment
  • Action: Sets whether the background image should scroll with the page or box. Attribute values

| | attribute value that | | scroll | scrolling, said the background image and the relative position unchanged box, roll away with page scrolling | | fixed | fixed, background of the positioning of the reference point from the upper left within the box border vertices to the vertex on the left of the browser window, Page scrolling, the upper left of the browser window vertices is the same, lead to background and fixed in a certain position of the browser window, don’t roll away | with page scrolling

6. Synthesize background

  • The background attribute can combine the values of five single attributes
  • Attribute values: There can be 1-5 attribute values separated by Spaces. The two attribute values located in the background are regarded as one attribute value and cannot be separated or reversed. The five attribute values are interchangeable
 body {
          background: url(images/bj.jpg) no-repeat center top scroll #666;
      }
Copy the code

Matters needing attention:

** 1, ** if the attribute value is not set completely, other single attributes that are not set will be loaded with the default value

background: pink;
Copy the code

(2) If you want to layer a part of the composite attribute, leaving the other attributes unchanged, it is best to use a single attribute to write the layer

body {
          background: url(images/bj.jpg) no-repeat center top  #666;
          background-attachment: scroll;
      }
Copy the code

7. Background application

1. Replace the insert diagram

  • The H1 tag has the highest weight and contains the most important information inside, such as the logo and the largest title
  • In addition

    Internal text can help improve SEO search rankings

  • If the logo image is set, the search keyword cannot be written if the insert image is used
<h1>
    <a href=""><img src="images/jingzheng.jpg"> </a>
</h1>
Copy the code

Background image replaces insert image method

  • If you want to solve SEO problems, you can replace the insert image with a search keyword in the HTML structure, and then use CSS to add a background image to the tag or tag
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> * {margin: 0; padding: 0; } h1 { width: 200px; height: 100px; } h1 a { display: block; width: 200px; height: 100px; background: url(images/jingzheng_small.jpg) no-repeat; } < / style > < / head > < body > < h1 > < a href = "" > today, it's good to | | | the sun 666 < / a > < / h1 > < / body > < / HTML >Copy the code

Text hiding method

1. Set the size to 0. IE8 and later can hide text, but IE7 and below have compatibility issues

font-size: 0;
Copy the code

2. You can set the label with a text-indent attribute. If the attribute value is very large and negative, the text will go outside the box

h1 a {
        display: block;
        width: 200px;
        height: 100px;
        background: url(images/jingzheng_small.jpg) no-repeat;
        /* font-size: 0; */
        text-indent: -20em;
        overflow: hidden;
    }
Copy the code

2. Background image of the padding area

  • In a box that has a background section and text content, the text will be loaded away from the background area. The background area should be extruded using the padding position
  • Padding in all four directions can be used to add a background image
.list { width: 300px; padding-left: 10px; border: 1px solid #000; margin: 10px; list-style: none; Font-family: 16px/32px "regular"}. List li {padding-left: 25px; background: url(images/tubiao.png) no-repeat left center ; }Copy the code

(3) Wizard graph technology

  • When a user visits a website, a request is sent to the server, and each image on the page is presented to the user after a request
  • However, a web page is often decorated with many small background images. When there are too many images in the web page, the server will frequently accept and send requests, which will greatly reduce the page load speed
  • In order to effectively reduce the number of requests received and sent by the server, improve the speed of page loading, CSS Sprites technology (also known as CSS Sprites, CSS Sprite)

The CSS Sprite

  • CSS sprites are a way to manipulate background images on a web page
  • It combines all the sporadic background images involved in a page into one large image, and then applies the large image to a web page so that when a user visits the page, all the background images on the page can be displayed with a single request to the service
  • Usually, this large image composed of many small background images is called a Sprite

Technical basis of CSS Sprite

  1. Make the small size background image used in the web page into a TRANSPARENT PNG image
  2. Using the background location technology, each small picture of the Sprite map is loaded onto the corresponding label

Notes for making Sprite maps

  1. Sprites are small decorative background images, insert images cannot be placed on top
  2. The width of the Sprite depends on the label width of the widest background image
  3. Sprites can be placed horizontally or vertically, but there must be enough white space between each image to ensure that the background image does not appear when loaded inside a TAB
  4. At the bottom of the Sprite, leave as much space as possible for adding other sprites in the future

Can be made through the online wizard map online

CSS3 added background properties

The background is translucent

  • CSS3 supports semi-transparent background writing, and color values have been added to an RGBA mode
  • Rgba mode: Adds an opacity setting based on RGB. The opacity alpha value ranges from 0 to 1, with 0 being fully transparent, 1 being completely opaque, and 0.5 being translucent
  • Written: RGBA (Red, green, blue, opacity)
  • Note: background translucency refers to the box background translucency, the contents of the box is not affected
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, Word-wrap: break-word! Important; "> < span style> p{width: 100px; height: 100px; } .p1 { background-color: rgba(0, 255, 0, 1); }. P2 {background-color: rgba(0, 255, 0, 0.5); } < / style > < / head > < body > < p class = "p1" > the < / p > < p class = "p2" > b translucent < / p > < / body > < / HTML >Copy the code

Also, you can write text and borders transparently, both in RGBA format

Color: rgba (0,0,0,0.5); Border: 1 px solid rgba (0,0,0,0.5);Copy the code

②, background zoom background-size

Background-size sets the size of the background image, just like we didScreen adaptation is widely used in mobile Web development

| | attribute value that | | | 1 px – 2 pixels, only 1 set value, such as vertical scale drawing, setting two value, according to the setting load | | | percentage with pixel values set in the same way, setting percentage, The width and height properties of numerical reference box | | cover | automatic scaling, extend to the background image is enough big, in order to make the background image completely covers the background region, such as overflow the part will be hidden | | contain | automatic adjust the scaling, the image image extension to the largest size, Picture always | full displayed in the background area

.box1 { background-size: 50px 50px; } .box2 { background-size: 50% 50%; } .box3 { background-size: cover; } .box4 { background-size: contain; } <div class="box1"> px value </div> <div class="box2"> percentage </div> <div class="box3"> cover </div> <div class="box4"> contain </div>Copy the code

③, multi-background

  • CSS3 provides that multiple background images can be added to a box
  • When the background-image attribute value is written, multiple background URL path addresses are separated by commas
  • Note: When background is loaded, write the background first and then write the background image
 background-image: url(images/pdx.jpg) ,url(images/jingzheng.jpg);
Copy the code