TA的每日心情 | 开心
2018-8-8 03:13 |
|---|
签到天数: 1 天 [LV.1]初来乍到
|
本帖最后由 喬治兄 于 2019-9-26 12:34 编辑
* \# n4 B& |1 p% s8 N/ D8 J8 U* Q4 l9 V
【Clip 座標切圖法】製作不切圖片的切圖法
7 d0 r: p6 g* X# L3 u2 @! n
. I3 `# \1 h! F1 Q+ S參考下帖問題
3 t2 c' D y6 u$ D: f[求助] 請賜教: 求 clip 圖置於左上 無切圖嘗試製作 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36035&extra
5 h. w1 |2 L# \! O/ y
% u% B, X2 w2 y & m7 F) }" M+ k0 T2 D' S* ^
7 l' w' k& ]! a. E請注意綠色是左欄單字, 藍色是右欄單字
* z ]0 ?0 ?$ p6 g! R很簡單的利用 負的座標 margin-top 和 margin-left 把座標移回去0 c5 r1 z* |' V6 g' o l: F. Q
附件在圖片下面 Clip_Margin.zip
; l2 g+ R# Q! B a2 \( J感覺此方法不甚具有彈性盼各位同好先進指點更加具有彈性的處理方法$ e/ U0 o' O1 P4 n ?$ Q$ c
謝謝+ m/ V0 b6 I. _! q3 c7 F3 |! R
- E/ q6 F7 V' I9 P9 N! C
% e$ U5 B( U5 ^+ c* n% D _5 u* G; T. b. w- p$ l) m) _
忽感 css 之強大從未對 css 深入了解, 知之甚微, 勢必還有許多能改善, 改進之處 , ^0 y9 J. H# ~ G- |: O# y, E
此只是一個方法, 應該還很多可以實現的方法, 方式.... 8 u/ c6 b% O, r% T
. Y' }0 k( R5 `& f3 @9 o
答案,始終就不會僅有少數那幾個 , j3 ?4 x5 P2 w0 C
6 z9 i3 X* Y" X! N% P
多幾次...Try Error.....您也就會有自己的答案, 自己的方法 $ k8 u. ` n5 @" ?# m8 n
; a: W+ u) Q( a
) A, G/ \) j( N o$ X$ l1 g7 D
$ Y( g9 R0 a0 w/ R" X
PS." F$ y0 }! u2 P+ ~1 k) e( C! ^: B
* M9 B9 Q# o/ Q1 t
- 此為兩欄式的 Clip 座標切圖法
- 三欄式的 Clip 座標切圖法應該也是大同小異....相同的 HTML 語法便可處理
- 若需同頁左最下單詞和右最上的釋意合併於一個詞條 或 有 當頁最右下角單詞和隔頁最
' \' E; r+ R: m: O1 W8 ^左上角釋意合併於一個詞條應於 Excel 能計算到相接合的座標再搞成同樣形式合併之$ ~( k( C% ]- w9 s& i
6 \& T. Q4 X* g" r
- x$ `1 ]8 ?# E6 M& z
8 Z7 q; G8 a1 H
abbreviation
0 E$ U9 ~9 s1 j& A, ^<b>abbreviation</b>
. q6 R! U8 W* ^<br>) V% @/ i7 g+ N) }+ h0 t" v1 w$ [5 @
<style>img { position: absolute;clip: rect(224px,707px,672px,0px); margin-top: -224px; margin-left: 0;}</style>( j3 G- I/ f$ X7 ~/ P6 U) K
<img src="0002.png" width="1416" height="2172">1 [* N' b9 ^# f# e+ ]! V {' z/ s
</>
3 r+ m7 }0 K+ g) h; Y$ h& {ABC8 A; @0 L5 J/ V5 V
<b>ABC</b>2 H' f! u/ r7 }+ }; m
<br> {+ v8 A" ~- w% R
<style>img { position: absolute;clip: rect(672px,707px,1424px,0px); margin-top: -672px; margin-left: 0;}</style>& U1 w+ I/ f ?
<img src="0002.png" width="1416" height="2172">
- ` W/ e# K+ {9 }( n. S: f</>
+ f' D) Q3 M9 n e2 i5 x% ^abet. N% @! X3 L% R& _
<b>abet</b>
4 [6 C) m4 y; ~<br>4 X' x- {7 [) d
<style>img { position: absolute;clip: rect(561px,1416px,936px,707px); margin-top: -561px; margin-left: -707px;}</style>: f: P. V# n: y# s3 V6 B3 U
<img src="0002.png" width="1416" height="2172">
0 A2 e4 r2 l: R7 h0 z0 F3 a; Q( u</>' q* g1 e5 t4 ~' j, J9 ~( z* [: U6 J
abeyance+ o& ~ Q! `3 @/ [9 v3 v% ^1 ^
<b>abeyance</b>
9 B. J" |$ @! T' n2 T, b<br>
# N6 Y8 f0 Q$ b) ~* s$ ~1 y* H<style>img { position: absolute;clip: rect(936px,1416px,1798px,707px); margin-top: -936px; margin-left: -707px;}</style>7 o0 _* }( l4 p& X5 V& Q* l4 J$ H% }5 t
<img src="0002.png" width="1416" height="2172">
M$ A, I" `3 {3 |</>
0 ~% |7 R$ `$ ^; a8 t( }' ]& s/ e: E/ X
* Q! M9 K" x$ ?- h/ B$ I1 x7 Z1 o
* ~7 ^' I3 {4 \8 b9 f1 X3 X# @3 @5 x1 I# E- ]
, Q9 X$ |: z$ s; G5 v
* a# y( g7 ]/ S
5 F# ]5 l8 n& o7 ?) |
|
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？免费注册
x
|
发表于 2019-9-26 01:28:31
4 g) H3 S' [$ d
楼主
* O* q! _8 I, B
6 B$ ?* s6 d9 d _* o& H* d) W
6 O2 h, @. w% z8 G3 W: K