css 从大图截取小图标 |css 样式就近原则

在 CSS 中，大家可以使用background-image属性来设置图片背景。而要截取小图标，大家需要使用background-position属性。该属性可以用来控制背景图片在元素中的位置。

例如， 大家有一个包含多个小图标的大图，其大小为 200px*200px。要使用其中的某个图标，需要设置background-position的值为该图标在大图中的位置。

.icon {
width: 30px;
height: 30px;
background-image: url('big-icon.png');
background-position: -60px -150px;
}

上述代码中，大家设置了一个名称为icon的元素，其大小为 30px*30px。使用background-image属性设置了背景图片为 big-icon.png。而background-position属性的值为 ‘-60px -150px’，表示该小图标在大图中的位置为横向偏移 -60px ，纵向偏移 -150px 。

通过这种方法，大家就能够在 CSS 中截取出小图标，并应用于网页设计中。这种方式不仅减少了图片的请求，提高了网页加载速度，还能够让网页设计更加灵活。