查看: 633|回复: 8
打印 上一主题 下一主题

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

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

    [LV.1]初来乍到

    254

    主题

    4264

    回帖

    7万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    79050

    小蜜蜂章笑傲江湖章灌水大神章QQ 章

    QQ
    跳转到指定楼层
    1
    发表于 2019-9-25 19:05:23 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    本帖最后由 喬治兄 于 2019-9-25 19:40 编辑

    小弟不才,搞了一天一夜
    實在不知如何能把 clip 的圖置於左上
    盼同好指引迷津...處理方法狀況如附圖 & 附件
    經過 clip 的圖定位應該是在原圖的位置上
    不知是否有方法能左上角
    謝謝
    感謝大德


    abbreviation
    <b>abbreviation</b>
    <style>img { position: absolute;clip: rect(224px,707px,672px,0px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    ABC
    <b>ABC</b>
    <style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    abdicate
    <b>abdicate</b>
    <style>img { position: absolute;clip: rect(1424px,707px,1836px,0px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    abduct
    <b>abduct</b>
    <style>img { position: absolute;clip: rect(1836px,707px,2168px,0px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    aberration
    <b>aberration</b>
    <style>img { position: absolute;clip: rect(110px,1416px,561px,707px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    abet
    <b>abet</b>
    <style>img { position: absolute;clip: rect(561px,1416px,936px,707px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    abeyance
    <b>abeyance</b>
    <style>img { position: absolute;clip: rect(936px,1416px,1798px,707px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>
    abhor
    <b>abhor</b>
    <style>img { position: absolute;clip: rect(1798px,1416px,2136px,707px);}</style>
    <img src="0002.png" width="1416" height="2172">
    </>

    2019-09-25_190601.png (54.48 KB, 下载次数: 0)

    2019-09-25_190601.png

    2019-09-25_190550.png (50.25 KB, 下载次数: 0)

    2019-09-25_190550.png

    2019-09-25_190542.png (25.17 KB, 下载次数: 0)

    2019-09-25_190542.png

    2019-09-25_190530.png (51.02 KB, 下载次数: 0)

    2019-09-25_190530.png

    Clip test.zip

    627.43 KB, 下载次数: 5, 下载积分: 米 -5 粒

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

    [LV.1]初来乍到

    254

    主题

    4264

    回帖

    7万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    79050

    小蜜蜂章笑傲江湖章灌水大神章QQ 章

    QQ
    推荐
     楼主| 发表于 2019-9-26 01:56:26 | 只看该作者
    本帖最后由 喬治兄 于 2019-9-26 01:58 编辑
    colorcat 发表于 2019-9-25 23:27
    试试在style的img标签样式里加个 float:left


    colorcat 兄:
    感謝  仁兄及時提供思路
    同時也打通小弟的任督二脈
    哈...........

    [教程] [Clip 座標切圖法] 製作不切圖片的切圖法
    https://www.pdawiki.com/forum/fo ... ad&tid=36043&extra=
  • TA的每日心情
    擦汗
    前天 16:06
  • 签到天数: 885 天

    [LV.10]以坛为家III

    7

    主题

    2845

    回帖

    2万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    24806
    2
    发表于 2019-9-25 20:55:05 | 只看该作者
    大师兄,您这活可真不容易。仰望一下。
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

    254

    主题

    4264

    回帖

    7万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    79050

    小蜜蜂章笑傲江湖章灌水大神章QQ 章

    QQ
    3
     楼主| 发表于 2019-9-25 21:06:42 | 只看该作者
    本帖最后由 喬治兄 于 2019-9-25 21:14 编辑
    Gyngreenlie 发表于 2019-9-25 20:55
    大师兄,您这活可真不容易。仰望一下。


    Gyngreenlie 兄:
    大师兄有好幾個
    貧道是二師兄啦
    瞎試, 照網上抄來試, 哪有不容易?

    只是找不到方法試不出來
  • TA的每日心情
    开心
    2022-8-17 09:28
  • 签到天数: 100 天

    [LV.6]常住居民II

    0

    主题

    224

    回帖

    3009

    积分

    贡士

    Rank: 6Rank: 6

    积分
    3009
    4
    发表于 2019-9-25 23:27:00 | 只看该作者
    试试在style的img标签样式里加个 float:left
  • TA的每日心情
    开心
    2018-8-8 03:13
  • 签到天数: 1 天

    [LV.1]初来乍到

    254

    主题

    4264

    回帖

    7万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    79050

    小蜜蜂章笑傲江湖章灌水大神章QQ 章

    QQ
    5
     楼主| 发表于 2019-9-25 23:44:03 | 只看该作者
    colorcat 发表于 2019-9-25 23:27
    试试在style的img标签样式里加个 float:left

    感謝 colorcat 仁兄提供思路
    Thanks a lot
  • TA的每日心情
    开心
    2022-8-17 09:28
  • 签到天数: 100 天

    [LV.6]常住居民II

    0

    主题

    224

    回帖

    3009

    积分

    贡士

    Rank: 6Rank: 6

    积分
    3009
    7
    发表于 2019-9-26 08:58:29 | 只看该作者
    喬治兄 发表于 2019-9-26 01:56
    colorcat 兄:
    感謝  仁兄及時提供思路
    同時也打通小弟的任督二脈

    客气,我也只是刚好看了相关的排版属性设置而已。
  • TA的每日心情
    无聊
    2022-7-21 15:56
  • 签到天数: 216 天

    [LV.7]常住居民III

    25

    主题

    646

    回帖

    1万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    16738
    8
    发表于 2020-8-8 10:52:59 | 只看该作者
    本帖最后由 wjl 于 2020-8-8 10:55 编辑

    乔治兄,如何解决使用<style>img { position: absolute;clip: rect(672px,707px,1424px,0px);}</style>
    <img src="0002.png" width="1416" height="2172">后的显示比例比使用<style>img { width: 100%;}</style>时的大的问题呀?

    使用img { width: 100%;}时的显示

    使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}时的显示

    如何才能以使用<style>img { width: 100%;}</style>时的显示比例将{
    position: absolute;clip: rect(3047px,4204px,6094px,2102px); margin-top: -3047px; margin-left: -2102px;
    } 所截取部分显示在视区的左上角呀?

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

    [LV.1]初来乍到

    254

    主题

    4264

    回帖

    7万

    积分

    状元

    Rank: 9Rank: 9Rank: 9

    积分
    79050

    小蜜蜂章笑傲江湖章灌水大神章QQ 章

    QQ
    9
     楼主| 发表于 2020-8-8 14:45:50 | 只看该作者
    本帖最后由 喬治兄 于 2020-8-8 14:56 编辑
    wjl 发表于 2020-8-8 10:52
    乔治兄,如何解决使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}
    后的显示比例比使用 ...


    wjl 兄:
    我只試了一頁
    感覺效果不佳
    https://www.pdawiki.com/forum/thread-36043-1-1.html
    [教程] 【Clip 座標切圖法】製作不切圖片的切圖法

    後來改試 clip-path ....但mdict 沒支援此標簽, 討論中有原因答案

    https://www.pdawiki.com/forum/thread-36172-1-1.html
    [求助] 請賜教: 有關 css clip-path 的疑惑