how2j.cn


步骤 1 : 完整的图片   
步骤 2 : 使用背景方式   
步骤 3 : 使用img方式   

步骤 1 :

完整的图片

这是一个旺旺的动态图片,上面有各种旺旺的图

但是有的时候,我们只需要这个大图的一小部分,那么怎么做呢?
运行效果
<img src="http://how2j.cn/study/wangwang.gif">
<img src="http://how2j.cn/study/wangwang.gif">


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

使用背景方式

第一种方式,使用背景的方式获取一部分图片

对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(http://how2j.cn/study/wangwang.gif) no-repeat scroll -83px -0px ; } </style> <div></div>
<style>
div{
	width:25;
	height:25;
	background:transparent url(http://how2j.cn/study/wangwang.gif) no-repeat scroll -83px -0px ;
}
 
</style>

<div></div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

使用img方式

借助裁剪的方式只显示部分图片:

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="http://how2j.cn/study/wangwang.gif">
<style>
img{
    position:absolute;
    left:-83px;
    clip:rect(0px 108px 25px 83px);
} 
</style>

<img src="http://how2j.cn/study/wangwang.gif">


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


问答区域    
2017-11-18 移动的距离如何确定,为什么是-83?是不是需要测量图片的大小
xmh
不解,求解答




1 个答案

how2j 答案时间:2017-11-20
嗯,一点点摸索的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-08-17 想要仔细了解CSS clip:rect矩形剪裁功能可以看这里
mutoulazy
http://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/ 可以去看看这个博主的文章,里面讲的很仔细。








答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到




2017-07-30 移动的方向和最终的效果显示的关系




提问之前请登陆
关于 前端基础-CSS-显示图片一部分 的提问

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图