Opacity: Set opacity, which is written directly to the parent element. The children inherit the parent, while the children and text are also transparent

section{
    width: 500px;
    height: 500px;
    background-color: rgb(146.236.206);
    /* Opacity */
    opacity: 0.5;
}
div{
    width: 100px;
    height: 100px;
}
div:nth-child(1) {background-color: rgb(93.212.172);
}
div:nth-child(2) {background-color: rgb(72.184.146);
}
Copy the code

2. Background – image: background

div{
    height: 100px; It has to be wide and tallwidth: 500px;
    /* Background */
    background-image: url(logo.jpg);
     /* Background-image: url(./logo.jpg); * /
}
Copy the code

3. Background-repeat: Set the background image repeatedly

/* The default is repeated */
    background-repeat: repeat;
    /* do not repeat */
    background-repeat: no-repeat;
    /* Only horizontal repeat */
    background-repeat: repeat-x;
    /* Only the vertical direction is repeated */
    background-repeat: repeat - y;Copy the code

4.background-position:

  • Azimuth value
/* Use the azimuth value, first horizontal then vertical */
 /* Write only one value for horizontal */
    background-position: right bottom;
Copy the code

  • Value (length)
/* The length of the string is horizontal and then vertical; Can not negative, beyond the part hidden */
 /* Write only one value for horizontal */
    background-position: 40px 10px;
Copy the code

  • If /* is negative, more */ is hidden

/* Background-position: -20px-50px; /* Background-position: -20px-50px;

5. Background-attachment: Control background attachment

/* The default is to scroll with the page */
    background-attachment: scroll;
    /* fixed does not scroll with the page */
/* Set other boxes below for easy viewing, the part of background image beyond this box will be hidden */
    background-attachment: fixed;
Copy the code

6.background-size:

  • The numerical
 /* The horizontal and vertical directions */
    background-size: 200px 80px;
Copy the code

  • The percentage
/* % is the percentage relative to the box; The two values are horizontal and vertical */ respectively
    background-size: 80% 50%;
/* Percentage, if there is only one value, it is the horizontal value, vertical default is automatic, vertical proportion ratio becomes larger, more than the part hidden */
    background-size: 50%;
Copy the code

  • The keyword
/* Scale equally, as much as possible, but not more than the box */
    background-size: contain;
Copy the code

/* scale to cover the entire box */
    background-size: cover;
Copy the code

7. Property shorthand background-size: cSS3 new, so the shorthand before the property value with a slash /.

It is best not to use shorthand, especially size, may not work

 /* background:url repeat position size; * /
    background: url(./logo.jpg) no-repeat 10px 50px /200px 50px;
Copy the code

8. Sprite

  • Viewing port: according to the size of the inserted graph
  • Insert the picture
  • Adjust position: it is usually negative
<a href="">
            <span></span>
        </a>
Copy the code
span{
    /* Need to be set to inline block, block level elements to set width and height */
    display: inline-block;
    /* viewport */
    width: 28px;
    height: 23px;
    /* Insert the image */
    background-image: url(icon.png);
    /* Adjust position to negative value! * /
    background-position: -34px -368px;
}
/* Discoloration after insertion */
a:hover span{
    background-position: -36px -390px;
}
Copy the code

Third time!!