Set the background icon (sprite map) in the web page

Background picture:

/*设置背景图片*/
background-image: url(../images/icons.d895b84.png);
/*也可以设置多张图片*/
background-image: url(image/icons.d895b84.png),url(image/02.webp);
/* 背景图片的显示方式：默认方式 */
background-size: auto auto;

There are also display methods: cover (tiling), cover (occupying the area by zooming).

In order to save the burden on the server, there will be many small icons in a picture with a blank background, 

background-position: -662px -917px;

The code can be set,

The x and y coordinate points are in the upper left corner, so set x and y to be negative numbers.

There is also a simpler method (add x, y coordinates directly after):

background-image: url(../images/icons.d895b84.png) 0px 0px;

set background color

/* 渐变颜色 */
background-image: linear-gradient(rgba(255,0,0,0.5),rgba(0,255,0,0.5));
/*背景颜色*/
background-color: black;

Summary of this chapter

The greatest freedom in life is to choose how to respond to things.