|
|
|
|
步骤 2 : 使用背景方式 步骤 3 : 使用img方式
这是一个旺旺的动态图片，上面有各种旺旺的图
但是有的时候，我们只需要这个大图的一小部分，那么怎么做呢？ <img src="https://how2j.cn/study/wangwang.gif">
<img src="https://how2j.cn/study/wangwang.gif">
第一种方式，使用背景的方式获取一部分图片
对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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2021-03-07
理解不深刻
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-03-09
clip:rect
2 个答案
zzqAND 跳转到问题位置 答案时间：2020-05-29 注意:
clip:rect(上，右，下，左)；
上：从上往下截，去掉上截图。
右：从左往右截，去掉右截图
下：从上往下截，去掉下截图
左：从左往右截，去掉左截图
(所有的都是去掉对应方位的截图。
上、下都是从上往下截，
左、右都是从左往右截)
asdhiodhw 跳转到问题位置 答案时间：2020-03-24 你这个更容易迷糊，
很简单，上下就是，下减去上的宽度
左右就是右减去左的宽度，从绝对位置0开始
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2020-02-07
更简单的方式
2019-11-23
可不可以用定位的方式喃
2019-02-12
您好 请问图片无法正常显示是路径的问题吗
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 3 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
