掌上百科 - PDAWIKI

 找回密码
 免费注册

QQ登录

只需一步,快速开始

查看: 1292|回复: 8

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

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

    [LV.1]初来乍到

    发表于 2019-9-25 19:05:23 | 显示全部楼层 |阅读模式
    本帖最后由 喬治兄 于 2019-9-25 19:40 编辑
    & B* B! e& [8 a! |( W
    ! R: U( H! u/ u, J5 s' k$ D小弟不才,搞了一天一夜
    2 J% M% t5 L" W& }* f實在不知如何能把 clip 的圖置於左上
    5 m" A3 F# P) U' E盼同好指引迷津...處理方法狀況如附圖 & 附件- o  P% {- W% q5 q) Z) u
    經過 clip 的圖定位應該是在原圖的位置上
    8 b& L9 e( C9 w' D( {9 y9 B不知是否有方法能左上角
    ) `# p+ O+ X0 b  Q; n. X# L謝謝* X4 D3 o% J0 [1 @0 h
    感謝大德2 b& b% z5 U& [, |' n( s' ~1 G9 K
    , ~1 t! i6 |" O$ g, w( X

    . _; j5 ^) ?# w3 Sabbreviation1 W' U5 _/ @3 G1 S1 j% F' k/ \
    <b>abbreviation</b>2 ], J4 O% o4 x0 e
    <style>img { position: absolute;clip: rect(224px,707px,672px,0px);}</style>
      H" J" {, |- B" j  ~5 t<img src="0002.png" width="1416" height="2172">
    + U; T+ Y8 N3 m9 f5 }! @8 w* Z</>* r: T% t) u9 E( y* `
    ABC* ^5 K5 D' A9 u- l8 A% S6 l* M
    <b>ABC</b>
    : j4 f5 y8 P+ d& q<style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>1 Z6 c& W$ L$ j3 ^6 R
    <img src="0002.png" width="1416" height="2172">
    6 {; J. Y/ s1 ~# N7 q+ b</>
    $ G5 T8 D7 O' W" o4 n) `- Vabdicate
    8 Q3 }0 r1 Y3 {; J$ |5 F<b>abdicate</b>
    ' s; e+ h! i, O: P$ X, l<style>img { position: absolute;clip: rect(1424px,707px,1836px,0px);}</style>  l. f1 j# u% e: p7 ~# o
    <img src="0002.png" width="1416" height="2172">- D/ ~( ?% M3 @) _/ M
    </>  h3 M, ~# Z8 z; D
    abduct
    6 l: P  F- |# `+ F( n- i<b>abduct</b># m) e4 h4 j; P4 A1 n
    <style>img { position: absolute;clip: rect(1836px,707px,2168px,0px);}</style>
    + R* S0 m; s% t1 F<img src="0002.png" width="1416" height="2172">+ U' S$ e. ^3 F. M/ X
    </>
    % u3 e( u7 K" a3 uaberration. a/ p, z  q3 [. j8 r- G" t
    <b>aberration</b>% I! q, I; `0 d: v; O
    <style>img { position: absolute;clip: rect(110px,1416px,561px,707px);}</style>
    , J9 K! p% Q- C' {, t3 b6 w<img src="0002.png" width="1416" height="2172">% ~- x- R  s0 r' ^  b, U
    </>, }* A/ I4 o7 R0 r1 z
    abet) l" m) V5 a7 p, z% L
    <b>abet</b>
    - v) [3 v# ]  U, W6 P4 \3 j0 u<style>img { position: absolute;clip: rect(561px,1416px,936px,707px);}</style>
    $ S! h  t: s( m, x<img src="0002.png" width="1416" height="2172">
    6 R% S; \, d, z0 y  Y! R</>- q6 u; y! z6 C3 M/ E
    abeyance3 v' a% H9 {+ o' _. a
    <b>abeyance</b>
    ) u# }; U2 n1 n1 M* N3 Z; L# ^5 g<style>img { position: absolute;clip: rect(936px,1416px,1798px,707px);}</style>
    " k. ~) j; ^- @, K9 ]<img src="0002.png" width="1416" height="2172">
    4 R3 o( l& \7 A5 [, y0 M</>
    7 o6 |/ S! b; Q7 ^1 G  h6 k% jabhor
    3 m4 r% A  L% c4 w<b>abhor</b>
    5 E& e' [1 K, [2 G6 c% _<style>img { position: absolute;clip: rect(1798px,1416px,2136px,707px);}</style>. c8 L2 |* E  P: r5 c+ |# {
    <img src="0002.png" width="1416" height="2172">
    ; W$ [6 M) ?1 _( g. ]</>
    3 p$ T8 B* C1 y) M( S9 F5 e; T4 t7 P9 f

    本帖子中包含更多资源

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

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

    [LV.1]初来乍到

     楼主| 发表于 2019-9-26 01:56:26 | 显示全部楼层
    本帖最后由 喬治兄 于 2019-9-26 01:58 编辑
    6 h" m  v1 i3 @9 [
    colorcat 发表于 2019-9-25 23:27
    " B# N& b3 y/ h试试在style的img标签样式里加个 float:left
    % T% S3 v- j5 P4 ?, d
    + c( A( z: K2 x7 K2 l, o
    colorcat 兄:1 P( n: b1 U% f' |5 M8 [/ x
    感謝  仁兄及時提供思路
    4 @1 b/ ^2 z0 i% s5 [0 Z. x同時也打通小弟的任督二脈5 Y3 z$ W, |, D$ {
    哈...........: C% w' }- g: a4 }% o
    " y; |' r1 F: l8 R) I+ a
    [教程] [Clip 座標切圖法] 製作不切圖片的切圖法 - Y8 V# K+ i9 x
    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 编辑
    ' M9 K/ F/ r2 T1 U" t
    Gyngreenlie 发表于 2019-9-25 20:559 t) {0 U9 F  j/ |
    大师兄,您这活可真不容易。仰望一下。
    # q7 P* e) o* M& ?

    * B6 z& Z+ u+ t7 ~6 U2 R0 dGyngreenlie 兄:( j! Q6 p" ~1 A
    大师兄有好幾個  ?' R% w: B5 q  c9 d) U2 P$ Z
    貧道是二師兄啦& F; S% Y4 E+ ^0 |
    瞎試, 照網上抄來試, 哪有不容易?
    5 z. r7 S4 R" d/ h5 P, F( e6 W' v) j/ S
    ! a4 F1 r# p, C8 k' u/ e* {9 y只是找不到方法試不出來
  • 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
    . o! m' H7 D& A9 l. m# [试试在style的img标签样式里加个 float:left
    2 r0 h7 K) V& t
    感謝 colorcat 仁兄提供思路
    ' l. w6 V' P5 h" z/ H* M$ OThanks a lot9 X4 c$ E" A) X* J) i
  • TA的每日心情
    奋斗
    2023-8-14 11:56
  • 签到天数: 101 天

    [LV.6]常住居民II

    发表于 2019-9-26 08:58:29 | 显示全部楼层
    喬治兄 发表于 2019-9-26 01:569 g" D& W% c1 y: b/ I
    colorcat 兄:
    1 K; C9 D$ S# I7 Y9 P5 E2 |$ Y感謝  仁兄及時提供思路3 J  F0 A# f+ o0 L- f# L% F
    同時也打通小弟的任督二脈
    $ i9 A1 t4 H+ C" {
    客气,我也只是刚好看了相关的排版属性设置而已。
  • TA的每日心情
    无聊
    2022-7-21 15:56
  • 签到天数: 216 天

    [LV.7]常住居民III

    发表于 2020-8-8 10:52:59 | 显示全部楼层
    本帖最后由 wjl 于 2020-8-8 10:55 编辑 ' F- p0 Z& Z; J1 `* @+ v

    9 v6 |  v% f- g& X乔治兄,如何解决使用<style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>3 Q+ ?5 I; f9 h8 s+ V
    <img src="0002.png" width="1416" height="2172">后的显示比例比使用<style>img { width: 100%;}</style>时的大的问题呀?
    3 Z' g6 b) A5 H; @# ]( W% H$ y. ^" B0 A! F, J0 t. w
    使用img { width: 100%;}时的显示; p* W' }% m9 H% o8 k& B( ^
    / `) O9 p2 P; u
    使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}时的显示
    4 I3 O0 e7 n1 D7 ?; x% _6 D' @1 r- t: O$ F: C+ ~# p3 v1 |
    如何才能以使用<style>img { width: 100%;}</style>时的显示比例将{4 s. ?& q' a3 ?: a4 R" y( U: D; {
    position: absolute;clip: rect(3047px,4204px,6094px,2102px); margin-top: -3047px; margin-left: -2102px;
      v: Q  I2 y8 }; l  w} 所截取部分显示在视区的左上角呀?' r; ^2 s$ J! b& y6 x' i  s
    1 O2 }* }+ U- w/ ]; X  Y/ w. R
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

     楼主| 发表于 2020-8-8 14:45:50 | 显示全部楼层
    本帖最后由 喬治兄 于 2020-8-8 14:56 编辑 9 a3 D: \! X6 Z6 Z' N, g( q2 r5 Y
    wjl 发表于 2020-8-8 10:52" X+ l+ C6 U/ y% T# v6 t4 v
    乔治兄,如何解决使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}1 F: o, R; a9 a2 u) ]
    后的显示比例比使用 ...
    2 u# V: b. }/ V: `3 @& F

    + N. i  _2 j( _& z5 r7 |wjl 兄:1 Y% o6 l7 L  A: B# R3 b9 G
    我只試了一頁
    ; D  l& O/ P% D( U) ~: w1 D7 Z. t感覺效果不佳5 |- |: J& G; Q' h# R
    https://www.pdawiki.com/forum/thread-36043-1-1.html$ O) }* |6 l+ u4 W+ E* b: ]' q
    [教程] 【Clip 座標切圖法】製作不切圖片的切圖法
    : F7 \# G( C2 P, y$ m" n6 |# ?+ `" y* d4 G0 ^% A9 r! p
    後來改試 clip-path ....但mdict 沒支援此標簽, 討論中有原因答案& b! \' ^- X# d" j9 e$ a, Q

    ; P% w9 j; L7 {$ n5 y( {" Ghttps://www.pdawiki.com/forum/thread-36172-1-1.html* f& K+ \: |- F7 W: D5 x
    [求助] 請賜教: 有關 css clip-path 的疑惑7 \* |, m0 z' C" n1 ]' n; X5 G
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

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

    GMT+8, 2025-4-27 06:28 , Processed in 0.023877 second(s), 23 queries .

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

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