[問題] 試用clip的功能卻失敗了...?

看板Web_Design作者 (jjbrian)時間12年前 (2013/08/22 13:23), 編輯推噓2(2推 0噓 12→)
留言14則, 2人參與, 最新討論串1/2 (看更多)
我想試試看 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
推
08/23 21:57, , 1F
因為你用了 width="210" height="60"，所以就縮小了啊
08/23 21:57, 1F
→
08/26 10:45, , 2F
但clip的用處不就是可以呈現一張圖的某個部分而不是整張嗎
08/26 10:45, 2F
→
08/26 10:47, , 3F
因為它現在是整張圖，我只是想要他只呈現圖裡的某的區塊@@
08/26 10:47, 3F
→
08/30 19:31, , 4F
然後 rect 其實是需要單位的，你只寫了數值 XD
08/30 19:31, 4F
→
08/30 19:36, , 5F
抱歉，是我弄錯了，其實不用單位 囧>
08/30 19:36, 5F
→
08/30 19:40, , 6F
你的 code 有個問題，就是 left 比 right 還大，所以這樣
08/30 19:40, 6F
→
08/30 19:41, , 7F
這樣左框會在右框的右邊，所以等於沒圈到圖片
08/30 19:41, 7F
→
08/30 19:41, , 8F
所以我這看到的是 "完全沒有圖片"，而不是有整張圖
08/30 19:41, 8F
→
08/30 19:42, , 9F
剛才試了一下，你說的情況是發生在 IE，而且 IE 看來
08/30 19:42, 9F
→
08/30 19:42, , 10F
在 rect 需要單位才行
08/30 19:42, 10F
→
08/30 19:51, , 11F
從 W3C 的文件看來應該是有單位才對，我剛才說 "不用" 是
08/30 19:51, 11F
→
08/30 19:51, , 12F
因為我測了 Firefox 和 Chrome, 卻發現他們允許無單位的值
08/30 19:51, 12F
→
08/30 20:01, , 13F
為何如此我就不太清楚了 囧>...
08/30 20:01, 13F
推
08/30 20:10, , 14F
抱歉上面我說的有點亂 XD... 我用回文整理一下好了
08/30 20:10, 14F
‣ 更多 jjbrian 的文章
文章代碼(AID): #1I5Q19eH (Web_Design)
‣ 更多 jjbrian 的文章
文章代碼(AID): #1I5Q19eH (Web_Design)