用css实现只取图片中一个图标并不需要裁剪

773人浏览 2023-10-23 14:31:10

在网站设计编辑中，我们会往往取网上找图片素材，但是呢，找到的图片素材都在一张图片上，就比如说图标，图片如下：

图标合集

如果让你只取其中一个图标，你是否在想用软件分割呢，其实并不用，css就可以实现只取其中之一并且不需要裁剪，步骤如下：

第一步：量出图标大小以及图标左上角位置

这里我们取第一行第二个图标显示，图标大小37X38，左上角位置为：82X22

第二步：设置显示div的大小为图标大小

<html>

<body>

</body>

</html>

第三步：设置div的背景图片为图标素材，并且显示图片素材中第二个图标的位置

<html>

<body>

<style>

.show{ background:transparent url(/images/2.png) no-repeat scroll -82px -22px ; width:37px; height:38px; }

</style>

</body>

</html>

显示如下：

是不是很神奇，其实主要靠的是其中

background:transparent url(/images/2.png) no-repeat scroll -82px -22px ;

其中

background:transparent表示div背景透明，然后

url(/images/2.png)表示设置div的背景为图标素材图片

no-repeat 表示图片不重复

scroll -82px -22px 表示背景图片左边移动82个像素，向上移动22个像素，也就是说从x：82px y:22px开始显示图片

然而div只有一个图标的大小，所以显示出来的就只有一个图标大小，其余部分均为不可见。

如此就实现了CSS让图片只显示一部分，也就相当于抠图的功能。

相关推荐