61,129
社区成员
发帖
与我相关
我的任务
分享请问如何通过css来剪切图片，而且不占位
据我了解，clip是可以剪切图片的，但是实际上clip只是不显示全部图片而已，位置还是占那么多的。
比如下面一段代码：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:100px;
}
</style>
<script type="text/javascript">
function clipImage()
{
document.getElementById("img1").style.clip="rect(0px,50px,50px,0px)";
}
</script>
</head>
<body>
<img id="img1" border="0" src="http://img04.taobaocdn.com/imgextra/i4/415165877/T2JVyLXf8bXXXXXXXX_!!415165877.jpg" />
<input type="button" onclick=clipImage() value="Clip image" />
</body>
</html>
实际效果是：
请问：有没办法既能够剪切图片，图片又可以不完成占位的呢？
比如下面一段代码：
<html>
<head>
<style type="text/css">
img
{
position:absolute;
top:100px;
}
</style>
<script type="text/javascript">
function clipImage()
{
document.getElementById("img1").style.clip="rect(0px,50px,50px,0px)";
}
</script>
</head>
<body>
<img id="img1" border="0" src="http://img04.taobaocdn.com/imgextra/i4/415165877/T2JVyLXf8bXXXXXXXX_!!415165877.jpg" />
<input type="button" onclick=clipImage() value="Clip image" />
</body>
</html>
实际效果是：
请问：有没办法既能够剪切图片，图片又可以不完成占位的呢？
...全文
请发表友善的回复…
发表回复
x131469828424 2013-01-25
- 打赏
- 举报
web交流专用群。千人QQ群：203423135
我们的文化：此群贵在精，此精不是精英之精，而是一种态度，求学的态度，热心帮助他人的态度。
ImN1 2013-01-15
- 打赏
- 举报
坐标设负值，那么(0, 0)位置就可以移到你要显示的部分
具体找些UI例子看，现在很多UI都这样做的，一张很多小图标排列的图片，要显示其中一个就切片显示
目的是减少浏览时的请求数量，减轻服务器负担
这个是平衡的问题，因为对字节数较少的图片，服务器对请求回应的消耗比传输多个图片总字节数要多得多
但对于大字节数的图片，例如500K以上，（视乎需求）就应该先切开图片，分别传送，显示时再拼起来显示
