How to capture small icons from png with css

Css method to intercept small icons from png: first use the background attribute to introduce the png image, use the no-repeat attribute value to set the image to be non-repeating; then use the background-position attribute to set the initial position of the image for precise positioning.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

css file

.icon
{
    background: url(icon.png) no-repeat; /*url为png图片的路径*/
    /*width和line-height分别对应每个小图标的宽和高*/
    width: 20px;    
    line-height: :20px;
    display: inline-block;
}
.icon-small
{   /*png图片左上角为原点,往右往下均为负值*/
    background-position: -150px 0px;/*对应小图标的坐标*/
}

html file

<!-- 联想一下Bootstrap 字体图标(Glyphicons) 
    <span class="glyphicon glyphicon-search"></span>
-->
<div class="icon icon-small"></div>

Why are the background images of one page or multiple pages integrated into one image?

When we visit a website, we will make an HTTP request to the server. In addition to factors such as the speed of opening the website, processing and page size, image size, network speed, etc., another important factor is the HTTP request. number. The more HTTP requests there are, the slower the website will open. When an HTTP request is made to the server, the delay caused by the page opening speed is about 0.01 seconds. A connection and a picture will make a request. If HTTP Too many requests will cause a lot of delays on the page, and the access speed will naturally be slow.

If all background images are integrated into one image, only one HTTP request will be made to the server, the number of requests will be greatly reduced, and the delay will be small. Then use the background-image and background-position properties of CSS to realize the required background image and position it to achieve the desired expression effect of the page.

Recommended learning: css video tutorial

The above is the detailed content of How to capture small icons from png with css. For more information, please follow other related articles on the PHP Chinese website!