「模板:Layer Arrange/doc」：修訂間差異

出自Reko Wiki
跳至導覽 跳至搜尋
← 較舊編輯
視覺化wikitext
Hakaze（留言 | 貢獻）
1,717筆編輯
Hakaze（留言 | 貢獻）
1,717筆編輯
 
（未顯示同一使用者於中間所作的 4 次修訂）
第2行： 第2行：
* 一個可以把什麼都疊在一起的模板，目前設計可以疊5層
* 一個可以把什麼都疊在一起的模板，目前設計可以疊5層
* 透過CSS的<code>position</code>屬性的<code>relative</code>與<code>absolute</code>達到疊在一起的效果
* 透過CSS的<code>position</code>屬性的<code>relative</code>與<code>absolute</code>達到疊在一起的效果
* 使用此模板，文字會被置中，如果不要置中需要在style欄位設定<code>width</code>並將<code>display</code>屬性改成<code>inline-block</code>
* 使用此模板，因為最外圍的div長寬會被視為0，所以內文會被置中，如果不要置中需要在style欄位設定<code>width</code>
* 目前每一層對齊方式皆以置中為主，之後視狀況加入新要素
* 目前每一層對齊方式皆以置中為主，之後視狀況加入新要素


第27行： 第27行：
* '''基本使用'''
* '''基本使用'''
<pre>{{Layer_Arrange
<pre>{{Layer_Arrange
| {{Color|yellow||第1層********}}
| {{Color|yellow||第1層　　　　}}
| {{Color|orange||****第2層****}}
| {{Color|orange||　　第2層　　}}
| {{Color|red||********第3層}}
| {{Color|red||　　　　第3層}}
}}</pre>
}}</pre>
{{Layer_Arrange
{{Layer_Arrange
| {{Color|yellow||第1層********}}
| {{Color|yellow||第1層　　　　}}
| {{Color|orange||****第2層****}}
| {{Color|orange||　　第2層　　}}
| {{Color|red||********第3層}}
| {{Color|red||　　　　第3層}}
}}
}}


第48行： 第48行：
| {{Glow Text|red|'''測試文字'''|scale=0.25}}
| {{Glow Text|red|'''測試文字'''|scale=0.25}}
}}
}}
* '''圖片疊文字'''
<pre>{{Layer_Arrange
| [[File:Japari ServalCatFace.jpg|200px]]
| {{size|18|{{Glow Text|black|''''提　供　'''}}}}
| style=width: 200px; height: 200px;
}}</pre>
{{Layer_Arrange
| [[File:Japari ServalCatFace.jpg|200px]]
| {{size|18|{{Glow Text|black|''''提　供　'''}}}}
| style=width: 200px; height: 200px;
}}
* '''圖片疊圖片'''
<pre>{{Layer_Arrange
| [[File:Japari ServalCatFace.jpg|200px]]
| [[File:Japari ServalCatFace.jpg|100px]]
| [[File:Japari ServalCatFace.jpg|50px]]
| style=width: 200px; height: 200px;
}}</pre>
{{Layer_Arrange
| [[File:Japari ServalCatFace.jpg|200px]]
| [[File:Japari ServalCatFace.jpg|100px]]
| [[File:Japari ServalCatFace.jpg|50px]]
| style=width: 200px; height: 200px;
}}


<noinclude>[[category:模板文件]]</noinclude>
<noinclude>[[category:模板文件]]</noinclude>

於 2023年8月11日 (五) 17:30 的最新修訂

描述

  • 一個可以把什麼都疊在一起的模板，目前設計可以疊5層
  • 透過CSS的position屬性的relative與absolute達到疊在一起的效果
  • 使用此模板，因為最外圍的div長寬會被視為0，所以內文會被置中，如果不要置中需要在style欄位設定width
  • 目前每一層對齊方式皆以置中為主，之後視狀況加入新要素

語法

{{Gradient Text|方向|顏色|文字}}

欄位 必要性 作用 備註
匿名參數1 必要 第1層 (最底層)
匿名參數2 必要 第2層
匿名參數3 必要 第3層
匿名參數4 必要 第4層
匿名參數5 必要 第5層 (最上層)
style 選擇 最外層的自定義樣式 CSS語法

範例

  • 基本使用
{{Layer_Arrange
| {{Color|yellow||第1層　　　　}}
| {{Color|orange||　　第2層　　}}
| {{Color|red||　　　　第3層}}
}}
第1層　　　　
　　第2層　　
　　　　第3層


  • 發光文字疊加
{{Layer_Arrange
| {{Glow Text|yellow|'''測試文字'''|scale=1}}
| {{Glow Text|orange|'''測試文字'''|scale=0.5|flash=1}}
| {{Glow Text|red|'''測試文字'''|scale=0.25}}
}}
測試文字
測試文字
測試文字


  • 圖片疊文字
{{Layer_Arrange
| [[File:Japari ServalCatFace.jpg|200px]]
| {{size|18|{{Glow Text|black|''''提　供　'''}}}}
| style=width: 200px; height: 200px;
}}
'提　供　


  • 圖片疊圖片
{{Layer_Arrange
| [[File:Japari ServalCatFace.jpg|200px]]
| [[File:Japari ServalCatFace.jpg|100px]]
| [[File:Japari ServalCatFace.jpg|50px]]
| style=width: 200px; height: 200px;
}}


取自「https://rekowiki.org/wiki/模板:Layer_Arrange/doc?oldid=46414」