Question

css怎么做才能只显示图片的一部分

比如说一张图片里面有很多个图标，我想显示其中一个图标，要用哪个代码？今天上课老师有讲过，但是记不起来了。。希望高手指点。

Answer 1

CSS Sprite

需要知道大图的网地，小图标在图上的位置偏移（写进css里的background-position要加负号），和大小。

<style>
.icon {
  background:url(background.png);
  background-repeat:no-repeat;
  background-position:-25px -374px;
  height:16px;
  width:24px;
}
</style>
<div class=".icon"></div>

追问

谢谢 刚刚剪切成功了 但是好像只能从上往下剪呢 怎么剪掉下面的 留下上面的呢？

追答

要配合height和width，只留下图标的大小就够了

追问

能分别取个从上往下截和从下往上截的代码吗？

追答

如图，只要给4个数值合起来刚好足够表明小图的位置和大小就行了啊，我没理解LZ什么意思。

追问

.img{

background:url(menubg.gif);

background-repeat:no-repeat;

background-position:0px 0px;

height:30px;

width:79px;

}

我想留下上面绿色部分，剪掉下面蓝色部分，这段代码有什么问题吗？ 为什么它显示的是图片的全部呢？

追答

代码看不出什么问题了。我试了一下可以的只显示绿色部分的啊。不知道选择器有没有用对，我是加点前缀用class选择的而不是标签名或者id

追问

好吧 我再检查检查，谢谢你，学到了很多

追答

帮不到忙我很惭愧

Answer 2

有好几种方式可以实现的，

第一种使用背景的方式，你可以参考一下：css如何让图片只显示一部分

第二种使用img裁剪的方式，你可以参考一下：css如何只取图片的一部分

第三种就是使用软件分割，这里自行百度了

希望可以帮到你

Answer 3

// 绝对定位与相对定位是冲突的，只能生效一个。。
background-position:-82px -137px; // 绝对定位
background-position:top right; // 相对定位