掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1017|回复: 8

[求助] 請賜教: 求 clip 圖置於左上 無切圖嘗試製作

[复制链接]
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

    发表于 2019-9-25 19:05:23 | 显示全部楼层 |阅读模式
    本帖最后由 喬治兄 于 2019-9-25 19:40 编辑 - U" K1 L! ]1 e4 `
    ) ]+ G" z5 ]6 ]$ V6 @
    小弟不才,搞了一天一夜  L+ I$ l2 A: Q5 |) E
    實在不知如何能把 clip 的圖置於左上7 m1 J+ S/ ?1 S5 a
    盼同好指引迷津...處理方法狀況如附圖 & 附件
    ! T! E5 R" Q4 H) `: I; P經過 clip 的圖定位應該是在原圖的位置上- u) ~9 _( r% ~+ H
    不知是否有方法能左上角
    # h/ o! t* I9 a9 x謝謝
    . U" c, {1 ^" J感謝大德: O( W0 Z/ e' K

    8 Z9 h9 t0 H0 r. Y# {# U- q7 h
    8 |. P, k  p3 @- t5 K) Babbreviation
    7 y- ~& b3 E% K' L6 _: }<b>abbreviation</b>
      T# R1 V% c* X<style>img { position: absolute;clip: rect(224px,707px,672px,0px);}</style>9 _+ V. n! n* ^: e+ j. p8 U
    <img src="0002.png" width="1416" height="2172">6 d) i( b0 w; e. A1 v& k" L# E+ W
    </>& V. \/ t9 }+ h1 U$ b+ |
    ABC
    ) P- j! p/ S. R- C<b>ABC</b>) {$ o$ r( ]5 Z7 Q; c/ j
    <style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>; @6 T; p! i9 N2 D- i
    <img src="0002.png" width="1416" height="2172">" d% u7 _& Z7 K  x& ?
    </>9 J8 d) E: H6 Z7 j! r  u
    abdicate5 T' x% |1 d+ @3 ~% l  [; p
    <b>abdicate</b>1 Z) w  `# J5 f) A
    <style>img { position: absolute;clip: rect(1424px,707px,1836px,0px);}</style>  q" O3 k- F6 L
    <img src="0002.png" width="1416" height="2172">
    ; f. v) ]% l( J</>
    7 T/ w% q3 y- t; W) A$ zabduct+ n& l* Q( C+ q3 l8 z
    <b>abduct</b>
    + e) s$ ]% s( ~- @+ Z8 |2 ^: _# U<style>img { position: absolute;clip: rect(1836px,707px,2168px,0px);}</style>- P' V# `! Q6 O6 e  d! e
    <img src="0002.png" width="1416" height="2172">
      J. x* `6 e% n' k+ G# O</>
    2 q& K' _6 B5 R( t. h* Kaberration
    * r: `1 [& u! L<b>aberration</b>" T; X7 Q7 T. P- W/ F, u
    <style>img { position: absolute;clip: rect(110px,1416px,561px,707px);}</style>
    5 D; B6 S( r) @6 B$ t7 k<img src="0002.png" width="1416" height="2172">3 V9 `" [1 H2 f( p( K' H; q4 d
    </>1 C+ O( ~7 h1 ~4 n
    abet1 y; t5 X7 S* B3 X
    <b>abet</b>7 x' @" ^, {/ V' m& E  L
    <style>img { position: absolute;clip: rect(561px,1416px,936px,707px);}</style># m" j' ^3 M5 o$ J# `* L
    <img src="0002.png" width="1416" height="2172">
    , ?5 A/ g4 A6 b% J</>& H5 ~0 m* z6 u5 N+ @, x
    abeyance8 ^% T; Z& e3 K1 n, p
    <b>abeyance</b>7 M+ L% c# n, w, Y0 x* R
    <style>img { position: absolute;clip: rect(936px,1416px,1798px,707px);}</style>1 N' e9 U, Q5 z( J: l; Z
    <img src="0002.png" width="1416" height="2172">
    8 ?4 \, G1 B/ g# l</>2 }1 O; _# u9 V0 U0 J
    abhor9 y4 [3 r; c8 g9 z
    <b>abhor</b>* |4 s. K" B( K3 h# F% q; ?
    <style>img { position: absolute;clip: rect(1798px,1416px,2136px,707px);}</style>  Y) x, x6 r* i# k
    <img src="0002.png" width="1416" height="2172">
    ' ^( C+ e5 u% o( L0 d</>
    5 m9 u' J+ k- {+ V, B& C2 X9 e7 E6 ^% O; ?# K

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有账号?免费注册

    x
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2019-9-26 01:56:26 | 显示全部楼层
    本帖最后由 喬治兄 于 2019-9-26 01:58 编辑 % y) ^4 d8 d# d7 Q* J+ k$ J
    colorcat 发表于 2019-9-25 23:27
    $ w8 f- _. T3 A. M3 E1 \试试在style的img标签样式里加个 float:left
    1 b, R" X6 T/ x- D
    9 l) i5 [6 _; B3 B( I& L6 B! b& r
    colorcat 兄:3 l+ h' n  l  h3 U- k1 j+ c8 j- W" p
    感謝  仁兄及時提供思路- V7 _0 [6 F) O
    同時也打通小弟的任督二脈
    . `" z) C3 K2 M  g& y  T7 A" h哈...........8 f$ m3 U$ i" |; Q
    , g0 E$ I9 ?# ]; L5 i3 y
    [教程] [Clip 座標切圖法] 製作不切圖片的切圖法
    : d- {9 j8 V  q1 ]https://www.pdawiki.com/forum/fo ... ad&tid=36043&extra=
  • TA的每日心情
    擦汗
    2024-2-8 08:54
  • 签到天数: 902 天

    [LV.10]以坛为家III

    发表于 2019-9-25 20:55:05 | 显示全部楼层
    大师兄,您这活可真不容易。仰望一下。
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2019-9-25 21:06:42 | 显示全部楼层
    本帖最后由 喬治兄 于 2019-9-25 21:14 编辑 4 v2 F4 M) J- d$ T) _* m
    Gyngreenlie 发表于 2019-9-25 20:55- S: e  R! C: C/ N
    大师兄,您这活可真不容易。仰望一下。
    1 p% i- m3 c9 ?6 l# U* E1 L

    $ I2 [9 R1 G! sGyngreenlie 兄:" C/ O, F2 F  N1 j
    大师兄有好幾個
    8 z7 j. ]+ j' l/ ~貧道是二師兄啦# R3 s/ S& A3 m' l6 x7 c
    瞎試, 照網上抄來試, 哪有不容易?8 F, Y; h" ?! F# u  v) O3 n' R
    5 [3 K* ~2 _, M, l8 u
    只是找不到方法試不出來
  • TA的每日心情
    奋斗
    2023-8-14 11:56
  • 签到天数: 101 天

    [LV.6]常住居民II

    发表于 2019-9-25 23:27:00 | 显示全部楼层
    试试在style的img标签样式里加个 float:left
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2019-9-25 23:44:03 | 显示全部楼层
    colorcat 发表于 2019-9-25 23:27
    ( P' M' o9 U6 Y6 |4 q% g试试在style的img标签样式里加个 float:left

    4 z. C( u4 ~- K0 L感謝 colorcat 仁兄提供思路
    3 v1 l+ K' F) ]3 h% AThanks a lot- b5 v+ V# w3 u
  • TA的每日心情
    奋斗
    2023-8-14 11:56
  • 签到天数: 101 天

    [LV.6]常住居民II

    发表于 2019-9-26 08:58:29 | 显示全部楼层
    喬治兄 发表于 2019-9-26 01:56% z0 y. A( V4 n) n
    colorcat 兄:& G% L: ?# k3 I9 G1 L# V' {
    感謝  仁兄及時提供思路; F4 N" ?! n% a2 I. g
    同時也打通小弟的任督二脈

    8 ]0 A* L8 q' l+ i2 O  n3 ]客气,我也只是刚好看了相关的排版属性设置而已。
  • TA的每日心情
    无聊
    2022-7-21 15:56
  • 签到天数: 216 天

    [LV.7]常住居民III

    发表于 2020-8-8 10:52:59 | 显示全部楼层
    本帖最后由 wjl 于 2020-8-8 10:55 编辑 3 p( W9 E' [1 d  y) @
    * v% `: l: a3 \/ e1 o" q2 _' i
    乔治兄,如何解决使用<style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>; ^# I  j8 N7 o
    <img src="0002.png" width="1416" height="2172">后的显示比例比使用<style>img { width: 100%;}</style>时的大的问题呀?5 F7 X9 v' m7 i

    , g1 W& y( b1 ^: d0 F3 d使用img { width: 100%;}时的显示8 m, t3 w) B- d3 {
    3 ?$ x8 O' h6 I' D" E8 Y
    使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}时的显示5 c" T# P$ Q" y9 _

    $ G  [: h  q/ }如何才能以使用<style>img { width: 100%;}</style>时的显示比例将{
    - D8 d7 k$ R7 W. Xposition: absolute;clip: rect(3047px,4204px,6094px,2102px); margin-top: -3047px; margin-left: -2102px;; j# D' f! `! ?. `; }9 o
    } 所截取部分显示在视区的左上角呀?5 C8 U5 z" M9 `" y# p# ~
    7 M. k& n; o1 x/ y
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-8-8 14:45:50 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-8-8 14:56 编辑
    " V4 t' z7 [9 C* f
    wjl 发表于 2020-8-8 10:52  }1 [; U6 z- X8 e4 B$ T
    乔治兄,如何解决使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}7 L# a- o) I6 _4 s( |* `) ?
    后的显示比例比使用 ...
    # A7 N! ?. C" u4 _  W

    % J( x% [) Y( T/ V2 n1 t8 ]wjl 兄:
    0 \6 W  K, {0 ^5 ]$ o* T6 a) a6 n我只試了一頁2 c3 q  h5 f% U0 }5 C) L# R! R
    感覺效果不佳
    2 X8 U* t- r' c3 U' Q. u1 F$ k4 Ghttps://www.pdawiki.com/forum/thread-36043-1-1.html
    8 y1 d* ?- n1 [( b[教程] 【Clip 座標切圖法】製作不切圖片的切圖法
    0 E) N6 W2 P. `, `8 N+ ?" J9 v' C
    8 n" O3 s8 g% N5 U6 h; P7 |後來改試 clip-path ....但mdict 沒支援此標簽, 討論中有原因答案
    ; t) m" N4 b* y. P: g
    6 Q( I/ U9 q  shttps://www.pdawiki.com/forum/thread-36172-1-1.html8 @# f! C" L) Q, ?
    [求助] 請賜教: 有關 css clip-path 的疑惑: o7 c6 p4 E$ L
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2024-4-19 18:16 , Processed in 0.050383 second(s), 9 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2023, Tencent Cloud.

    快速回复 返回顶部 返回列表