步骤 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 条以前的提问,请 点击查看
提问之前请登陆
提问已经提交成功,正在审核。 请于 我的提问 处查看提问记录,谢谢
|