作者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