怎么用css中background属性截图?

发布网友 发布时间：2022-04-06 11:04

我来回答

共4个回答

热心网友 时间：2022-04-06 12:34

background-position属性分为x轴和y轴，也就是横坐标和纵坐标两个值：background-positionx和background-positiony。
对于一整张大图只需要截取其中一部分，你需要知道两点：
1.需要的那一部分图片的在整个大图中的位置 2.它的大小

然后就好办了，我举个小例子：
一张300px*300px的大图，我需要的部分大小是宽20px高50px，在整个图片的位置离上边是20px；左边是80px，然后可以写样式了：
div{
background-image:url(bjimg.jpg);/*背景图片的路径*/
background-position:-80px -20px;/*背景图片的位置是距左80px；距上20像素*/
width:20px;/*div的宽度*/
height:50px;/*div的高度*/
}

希望对你有所帮助。

热心网友 时间：2022-04-06 13:52

如果你会fireworks就很好办，把几张图放在一个新建文档里面，看左下角的x、y轴的坐标值，如x=30,y=0,那background-position就这样写background-position:30px 0px，当然还可以这样简化：
background:url(xxx.jpg) 30px 0px no-repeat;

热心网友 时间：2022-04-06 15:26

按楼主的意思是要实现css sprites的功能吧，简单示例下（注意要使用overflow:hidden）：
.icon{
background-image:url('sprites.jpg');
background-repeat:no-repeat;
display:inline-block;
overflow:hidden;

}
.car{
background-position:20px 20px;
width:50px;
height:50px;

}

这样使用
<span class="icon car" title="小汽车"></span>

热心网友 时间：2022-04-06 17:18

在ps中来确定x、y的值，具体的百度一下