作者jjbrian (jjbrian)
看板Web_Design
标题[问题] 试用clip的功能却失败了...?
时间Thu Aug 22 13:23:13 2013
我想试试看 clip: rect() 的方式
在网页上呈现一张大图里面的多个小图
以下CSS
<style type="text/css">
.Allmiddle {
position:relative;
left:50%;
margin-left:-500px;
}
.mainlogo {
position: relative;
width: 210px; height: 60px;
}
.mainlogo img {
position: absolute;
clip: rect(20.5, 99.89, 230.5, 159.89);
}
</style>
然後是html的部分↓
<div style="width:1000px ; background-color:#CCC" class="Allmiddle">
<div class="mainlogo">
<img width="210" height="60" src="WEB-20130807-01.jpg" />
</div>
</div>
我做了两层div之後
最内层插入大图
然後在CSS用clip要切出一张小图
但是出来的是大图整张被缩成210X60大小....
我查了很久实在找不到哪里有误
恳请哪位高手告知@@
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 114.24.75.116
1F：推 hit1205:因为你用了 width="210" height="60"，所以就缩小了啊 08/23 21:57
2F：→ jjbrian:但clip的用处不就是可以呈现一张图的某个部分而不是整张吗 08/26 10:45
3F：→ jjbrian:因为它现在是整张图，我只是想要他只呈现图里的某的区块@@ 08/26 10:47
4F：→ hit1205:然後 rect 其实是需要单位的，你只写了数值 XD 08/30 19:31
5F：→ hit1205:抱歉，是我弄错了，其实不用单位 囧> 08/30 19:36
6F：→ hit1205:你的 code 有个问题，就是 left 比 right 还大，所以这样 08/30 19:40
7F：→ hit1205:这样左框会在右框的右边，所以等於没圈到图片 08/30 19:41
8F：→ hit1205:所以我这看到的是 "完全没有图片"，而不是有整张图 08/30 19:41
9F：→ hit1205:刚才试了一下，你说的情况是发生在 IE，而且 IE 看来 08/30 19:42
10F：→ hit1205:在 rect 需要单位才行 08/30 19:42
11F：→ hit1205:从 W3C 的文件看来应该是有单位才对，我刚才说 "不用" 是 08/30 19:51
12F：→ hit1205:因为我测了 Firefox 和 Chrome, 却发现他们允许无单位的值 08/30 19:51
13F：→ hit1205:为何如此我就不太清楚了 囧>... 08/30 20:01
14F：推 hit1205:抱歉上面我说的有点乱 XD... 我用回文整理一下好了 08/30 20:10