掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1293|回复: 8

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

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

    [LV.1]初来乍到

    发表于 2019-9-25 19:05:23 | 显示全部楼层 |阅读模式
    本帖最后由 喬治兄 于 2019-9-25 19:40 编辑 # _8 C7 b6 F) [/ F; g9 H+ z7 ^
    $ \0 [& E3 f# E$ q; G
    小弟不才,搞了一天一夜/ g2 K, q6 X6 x# l6 ~
    實在不知如何能把 clip 的圖置於左上+ `3 V& B3 \5 N5 m3 i) |$ g6 O+ }
    盼同好指引迷津...處理方法狀況如附圖 & 附件' k. p" ^; |2 s- c
    經過 clip 的圖定位應該是在原圖的位置上( h! T( j  b4 P, _( h) p
    不知是否有方法能左上角" p$ }8 B% ~, l& {1 x: Z
    謝謝
    ! O& t6 o3 R* }感謝大德8 I  u! z* s7 `7 b
    ( ?& _& L/ I! V0 l

    9 k2 K4 C1 l3 R$ e& [! T8 Habbreviation
    / G' k) @2 R# B. ^. B<b>abbreviation</b>( k! `' N! Q/ q! e3 V
    <style>img { position: absolute;clip: rect(224px,707px,672px,0px);}</style>
      d% @. f* i, l  V- D1 l# W$ v3 ^<img src="0002.png" width="1416" height="2172">
    ! o% T( ^& u  q4 v) L: f7 T</>5 f/ V" q8 I) A& d
    ABC
    * o+ \8 v7 r1 n  r<b>ABC</b>
    # z0 x0 a5 F+ u* P1 X7 {2 E<style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>: }% r  }0 q: U8 u  d* u) G3 a
    <img src="0002.png" width="1416" height="2172">5 {0 Y- A8 s8 c$ U* o5 v
    </>  o2 o" ?& g4 ?0 p, g1 x! b6 U
    abdicate
    6 e, w- {' ~$ b1 M<b>abdicate</b>
    3 k# D: v/ F9 |% R<style>img { position: absolute;clip: rect(1424px,707px,1836px,0px);}</style>
    7 W8 w5 j: A! @! J0 v- L. F' r<img src="0002.png" width="1416" height="2172">: O. `7 x" U) q
    </>' c3 `5 I/ r) g) \/ W  s
    abduct. H9 B* Z" A' Z( U; _& p0 a
    <b>abduct</b>
    & i, [8 y9 ]2 D" W6 ?* t/ X1 K; P5 t* f<style>img { position: absolute;clip: rect(1836px,707px,2168px,0px);}</style>0 t7 @" [( j1 ^) M
    <img src="0002.png" width="1416" height="2172">
    - ^" b6 c1 n  X</>  c& k# x6 _# h4 p9 s
    aberration
    6 d5 l7 o7 P: u: Z# r( b6 h<b>aberration</b>/ ]/ @2 j: R! G6 a
    <style>img { position: absolute;clip: rect(110px,1416px,561px,707px);}</style>& c1 N; }& ~8 u8 `+ z$ O& A
    <img src="0002.png" width="1416" height="2172">2 T* V; u) {' s
    </>
      o! x8 g" Z7 t) g9 Y9 Q2 {abet$ l' b' Z2 p8 C# `. J
    <b>abet</b>
    / K( O( k+ v3 O3 u* O<style>img { position: absolute;clip: rect(561px,1416px,936px,707px);}</style>
    " p1 |) k* n/ f! j( X. [<img src="0002.png" width="1416" height="2172">9 t+ w3 D) _0 {6 z, e$ l
    </>
    2 v% C/ F2 R1 g; ~abeyance$ G% a# t  @+ O* X0 ~* j0 v1 E
    <b>abeyance</b>
    ) H# Z7 u( `4 }+ e<style>img { position: absolute;clip: rect(936px,1416px,1798px,707px);}</style>
    , _; Y) P  E* c7 H7 ^( m7 Z<img src="0002.png" width="1416" height="2172">, \  Q: ]% z( p; ]( K  X
    </>; J1 ^4 c! N6 s& s: u5 K3 n
    abhor
    & K5 ?1 H+ H: u' }$ p<b>abhor</b>: S" c; P" i& T; {
    <style>img { position: absolute;clip: rect(1798px,1416px,2136px,707px);}</style>' L* `( Q0 \  a
    <img src="0002.png" width="1416" height="2172">
    / r  F+ W5 {' `8 X</>* w& E/ v* z% x+ L7 Y0 t
    ; R, L3 ^8 O+ Z$ r) c+ r4 f

    本帖子中包含更多资源

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

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

    [LV.1]初来乍到

     楼主| 发表于 2019-9-26 01:56:26 | 显示全部楼层
    本帖最后由 喬治兄 于 2019-9-26 01:58 编辑 ! f2 X0 N& g% K/ Y4 T
    colorcat 发表于 2019-9-25 23:27
    ! g" A$ q" z0 _7 U5 ~. i试试在style的img标签样式里加个 float:left

    " S8 I; S8 X1 y- P8 q; H, R- ]
    ) G. P0 D' M3 O( k, qcolorcat 兄:# |4 G0 |3 g4 A" j3 l$ ~4 j
    感謝  仁兄及時提供思路
    5 Q6 q- `4 p8 B' x. z' @; E同時也打通小弟的任督二脈
    % [$ j6 w6 B6 d! C- y哈...........- J. }; Y, |( K$ M  f+ j1 y  @
    ! ~+ S- F' Q& d2 s0 V# j
    [教程] [Clip 座標切圖法] 製作不切圖片的切圖法
    * {7 u7 q+ G. ~" c9 t. Jhttps://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 编辑
    8 a; ^3 D- O& z1 C
    Gyngreenlie 发表于 2019-9-25 20:55
    ! M5 ^; ^  }4 l大师兄,您这活可真不容易。仰望一下。
    9 g) L$ L* L" ^2 V; i
    : k+ _6 d' c6 ?' [8 ?+ A
    Gyngreenlie 兄:
    2 ?4 ?- p+ M" b. B大师兄有好幾個
    " B  X+ ]- f8 H* p+ `1 }0 D貧道是二師兄啦
    ; p0 W1 u9 F1 ~* D7 k. e瞎試, 照網上抄來試, 哪有不容易?8 v9 M# v& q, _

    , {8 u$ B, G. k只是找不到方法試不出來
  • 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: y0 ~& N/ T; i: v' ^6 _
    试试在style的img标签样式里加个 float:left

    * o* @  g9 V; J" ^感謝 colorcat 仁兄提供思路
    : I) S% X6 a& @Thanks a lot) v7 \& S, Y8 c# j% e6 G/ b
  • TA的每日心情
    奋斗
    2023-8-14 11:56
  • 签到天数: 101 天

    [LV.6]常住居民II

    发表于 2019-9-26 08:58:29 | 显示全部楼层
    喬治兄 发表于 2019-9-26 01:56( X  |% Q- R0 H! t* r
    colorcat 兄:  N  _6 V7 }. [7 V
    感謝  仁兄及時提供思路
    + y0 X% b' v4 Y2 X) j同時也打通小弟的任督二脈

    ' B5 a6 K% f0 C$ Q" W* I客气,我也只是刚好看了相关的排版属性设置而已。
  • TA的每日心情
    无聊
    2022-7-21 15:56
  • 签到天数: 216 天

    [LV.7]常住居民III

    发表于 2020-8-8 10:52:59 | 显示全部楼层
    本帖最后由 wjl 于 2020-8-8 10:55 编辑
    8 B' e7 [; S" F4 e# D$ P6 U6 b. p! w& g* |( [
    乔治兄,如何解决使用<style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>' I5 o; v3 y/ {' g
    <img src="0002.png" width="1416" height="2172">后的显示比例比使用<style>img { width: 100%;}</style>时的大的问题呀?
    # Q4 {( k- ]9 l% G. C" ]3 F
    $ ~1 l: f9 G# R使用img { width: 100%;}时的显示
    ' v+ d. j; D0 b  w- c5 F- Q: H5 c- I
    使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}时的显示& @: ^# L7 `( o' M

    ! H# P0 L- Z8 l% `2 R如何才能以使用<style>img { width: 100%;}</style>时的显示比例将{
    * o7 t  L3 G* `8 Kposition: absolute;clip: rect(3047px,4204px,6094px,2102px); margin-top: -3047px; margin-left: -2102px;
    ) ~# ~- H3 z4 S! z* _6 D3 c} 所截取部分显示在视区的左上角呀?
    9 c  C' {# `! L+ J
    % U9 A0 Z7 C0 C2 L+ {% F5 z
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-8-8 14:45:50 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-8-8 14:56 编辑
    + m& G% h, W+ c; A) x, F
    wjl 发表于 2020-8-8 10:529 \, u2 ~9 l; m* M! ^& \* c
    乔治兄,如何解决使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}
    % F- J  d! L  \3 @后的显示比例比使用 ...
    ) R# a( G, c) I( }  S
    4 ^3 G; m& |8 @# ~
    wjl 兄:& O9 ?2 f! u6 k. B( x( L9 n
    我只試了一頁# W3 \$ d8 b! C# T; x
    感覺效果不佳
    1 h# ]( @! G: e9 U6 j9 ~https://www.pdawiki.com/forum/thread-36043-1-1.html
    6 c& ~- _9 b3 P. x. R1 }+ x[教程] 【Clip 座標切圖法】製作不切圖片的切圖法/ Q( [7 \! Z7 t$ K8 F, N

    + i; o4 T' ]4 T! L% r/ d  U: {1 l6 z後來改試 clip-path ....但mdict 沒支援此標簽, 討論中有原因答案" c* ^! s4 p# ~$ l5 D7 a
    ! n: [( G, r8 W( e8 I# O. h; a: S: }
    https://www.pdawiki.com/forum/thread-36172-1-1.html
    4 l- g0 `: e1 q[求助] 請賜教: 有關 css clip-path 的疑惑& J0 ]" y) F9 W7 Z( h; Q% w
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

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

    GMT+8, 2025-4-27 19:02 , Processed in 0.024276 second(s), 23 queries .

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

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