|
|
|
|
步骤 2 : 使用背景方式 步骤 3 : 使用img方式
第一种方式，使用背景的方式获取一部分图片
对div使用背景图片 background:transparent url(/study/wangwang.gif) no-repeat scroll -83px -0px ; 等同于 background-color:transparent; background-image:url(/site/wangwang.gif); background-repeat:no-repeat; background-attachment:scroll; background-position: -83px -0px; 设置scroll -83px -0px 把图片向左滚动83个像素，向上滚动0个像素。 再把div大小设置为和小图片大小一样，即可大小只显示部分图片的效果 <style>
div{
width:25;
height:25;
background:transparent url(https://how2j.cn/study/wangwang.gif) no-repeat scroll -83px -0px ;
}
</style>
<div></div>
<style>
div{
width:25;
height:25;
background:transparent url(https://how2j.cn/study/wangwang.gif) no-repeat scroll -83px -0px ;
}
</style>
<div></div>
借助裁剪的方式只显示部分图片：
clip:rect(top, right, bottom, left) 裁剪之后，只显示被裁剪出来的图片，所以还需要把整个图片向左移动，才看上去像拿到了想要的那部分图片 img{ position:absolute; left:-83px; clip:rect(0px 108px 25px 83px); } <style>
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
</style>
<img src="https://how2j.cn/study/wangwang.gif">
<style>
img{
position:absolute;
left:-83px;
clip:rect(0px 108px 25px 83px);
}
</style>
<img src="https://how2j.cn/study/wangwang.gif">
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|