css 取一张图片中的一部分

在网页设计中，使用图片是非常必要的，而有些时候，需要使用图片的一部分而不是整张图片。幸运的是，CSS提供了方法来取图片中的一部分。这个方法被称为CSS Sprites。

CSS Sprites 本质上是一张大图，其中包含我们需要用到的小图。例如，如果我们需要在网页中使用五个小图标，我们可以将这五个小图标合并成一个大图，并命名为sprite.png。在 HTML 中，我们只需将小图标定位到大图中的正确位置，使其显示出正确的图标即可。

 .sprite {
            background-image: url('sprite.png');
            background-repeat: no-repeat;
    }
    .icon1 {
            width: 50px;
            height: 50px;
            background-position: 0 0;
    }
    .icon2 {
            width: 50px;
            height: 50px;
            background-position: -50px 0;
    }
    .icon3 {
            width: 50px;
            height: 50px;
            background-position: -100px 0;
    }
    .icon4 {
            width: 50px;
            height: 50px;
            background-position: -150px 0;
    }
    .icon5 {
            width: 50px;
            height: 50px;
            background-position: -200px 0;
    }
     

在上面的代码中，我们将五个小图标定位到一个大图片上，每个小图标都是50像素宽和高。我们可以通过修改位置属性（background-position）来选择要在页面上显示的小图标。

一旦 CSS Sprites 被实现，您的网页将加载得更快，因为浏览器只需要加载一个大图片，而不是多个小图片。此外，生成的 CSS 代码可以更少，因为我们不再需要一个CSS类来定义每张小图标。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！