When imitating a web page recently, I found that there is a line of code in the CSS code: background:url(image) no-repeat right center I don't understand what it means, Baidu learned it later, and record the knowledge points here;
This line of code is actually a shorthand for the definition of the background image. The
complete form is:
background-image:url(picture);
background-repeat:no-repeat;
background-position:right
center Paste the container or the right side of the browser page in the horizontal direction, and center is centered in the vertical direction. The order of these two is to define the horizontal position first, and then define the vertical position;
another example:
background:url(../images/top_ico.png) no-repeat right 14px;
It means that the background image is not repeated, it is close to the right side of the container in the horizontal direction, and 14px above the container in the vertical direction;
Expand the example, learn and apply:
.top_menu li { float:left; background:url(../images/top_ico.png) no-repeat right 20px;
The <li> tag is used to define list items. This line of code means that the background image contained in each column is top_ico.png, the image is not repeated, it is close to the right side of the list container, and 20px from the top of the list container;