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

喬治兄 · 发表于 2019-9-25 19:05:23

本帖最后由喬治兄于 2019-9-25 19:40 编辑

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

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-9-26 01:56:26

本帖最后由喬治兄于 2019-9-26 01:58 编辑

colorcat 发表于 2019-9-25 23:27
, Z0 F: _/ s) t' Y5 b% x. \& T试试在style的img标签样式里加个 float:left

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

[教程] [Clip 座標切圖法] 製作不切圖片的切圖法
https://www.pdawiki.com/forum/fo ... ad&tid=36043&extra=

Gyngreenlie · 发表于 2019-9-25 20:55:05

大师兄，您这活可真不容易。仰望一下。

喬治兄 · 发表于 2019-9-25 21:06:42

本帖最后由喬治兄于 2019-9-25 21:14 编辑

Gyngreenlie 发表于 2019-9-25 20:55% m1 D; D( ?& [; C4 i- A2 [
大师兄，您这活可真不容易。仰望一下。

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

只是找不到方法試不出來

colorcat · 发表于 2019-9-25 23:27:00

试试在style的img标签样式里加个 float:left

喬治兄 · 发表于 2019-9-25 23:44:03

colorcat 发表于 2019-9-25 23:27: x! G/ d: V" l& @1 }
试试在style的img标签样式里加个 float:left

感謝 colorcat 仁兄提供思路
Thanks a lot

colorcat · 发表于 2019-9-26 08:58:29

喬治兄发表于 2019-9-26 01:56
: S! _ g) j# `# f1 Qcolorcat 兄:: j( t Q, D; S& i* a- o
感謝仁兄及時提供思路: J6 F& j6 g) G1 A
同時也打通小弟的任督二脈

客气，我也只是刚好看了相关的排版属性设置而已。

wjl · 发表于 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;
} 所截取部分显示在视区的左上角呀？

喬治兄 · 发表于 2020-8-8 14:45:50

本帖最后由喬治兄于 2020-8-8 14:56 编辑

wjl 发表于 2020-8-8 10:52/ {, e2 H/ r4 _$ }2 H- _, M0 V
乔治兄，如何解决使用img { position: absolute;clip: rect(672px,707px,1424px,0px);}
+ C! f: B% u* }+ }) t后的显示比例比使用 ...

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 的疑惑

		自动登录	找回密码
密码			免费注册

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

本帖子中包含更多资源

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

本帖子中包含更多资源

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