|
|
|
|
步骤 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公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2024-07-25
对于 clip:rect 裁剪图片的理解
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
2023-12-05
clip:rect像素怎么填
2021-03-07
理解不深刻
2020-03-09
clip:rect
2020-02-07
更简单的方式
提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请 点击查看
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
