|
|
本帖最后由 喬治兄 于 2019-9-26 12:34 编辑
【Clip 座標切圖法】製作不切圖片的切圖法
參考下帖問題
[求助] 請賜教: 求 clip 圖置於左上 無切圖嘗試製作 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36035&extra
請注意綠色是左欄單字, 藍色是右欄單字
很簡單的利用 負的座標 margin-top 和 margin-left 把座標移回去
附件在圖片下面 Clip_Margin.zip
感覺此方法不甚具有彈性盼各位同好先進指點更加具有彈性的處理方法
謝謝
忽感 css 之強大從未對 css 深入了解, 知之甚微, 勢必還有許多能改善, 改進之處
此只是一個方法, 應該還很多可以實現的方法, 方式....
多幾次...Try Error.....您也就會有自己的答案, 自己的方法
- 此為兩欄式的 Clip 座標切圖法
- 三欄式的 Clip 座標切圖法應該也是大同小異....相同的 HTML 語法便可處理
- 若需同頁左最下單詞和右最上的釋意合併於一個詞條 或 有 當頁最右下角單詞和隔頁最
左上角釋意合併於一個詞條應於 Excel 能計算到相接合的座標再搞成同樣形式合併之
![]()
abbreviation
<b>abbreviation</b>
<br>
<style>img { position: absolute;clip: rect(224px,707px,672px,0px); margin-top: -224px; margin-left: 0;}</style>
<img src="0002.png" width="1416" height="2172">
</>
ABC
<b>ABC</b>
<br>
<style>img { position: absolute;clip: rect(672px,707px,1424px,0px); margin-top: -672px; margin-left: 0;}</style>
<img src="0002.png" width="1416" height="2172">
</>
abet
<b>abet</b>
<br>
<style>img { position: absolute;clip: rect(561px,1416px,936px,707px); margin-top: -561px; margin-left: -707px;}</style>
<img src="0002.png" width="1416" height="2172">
</>
abeyance
<b>abeyance</b>
<br>
<style>img { position: absolute;clip: rect(936px,1416px,1798px,707px); margin-top: -936px; margin-left: -707px;}</style>
<img src="0002.png" width="1416" height="2172">
</>
![]()
|
|
发表于 2019-9-26 01:28:31
楼主
