使用者:Fetton/sandbox
用戶Fetton的試驗場。
武田信玄
終
如何在不換行的情況下在某個圖像下添加文字？ 等問題
一、
如何在不換行的情況下在圖片下方添加文字？（類似於模板【寫作OO讀作XX】）
二、
如何給圖片加上圓形方框，或者是描邊？
類似於：
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
--Fetton論（✉緊募戰雙帕彌什系列條目編寫者），留言於: 2020年1月31日 (五) 15:44 (CST)
- 可以使用div將圖片連帶下面的文字框起來，這樣文字就會顯示在圖片下方了。具體的效果可能要具體地調整各種參數。例：
- 前面的文字後面的文字
圖片下面的文字 - {{黃金拼圖}}裡面的圖片在上傳時就是圓形的圖片，周圍是留白的。原圖：File:黃金拼圖人物導航條.png。如果沒有這種圖片而要實現這個效果的話，可以使用{{image}}中的radius功能，注意radius要和寬、高一致。如果需要描邊，則需要再加上border及border-radius屬性。例：
- — 葫蘆又留言 2020年1月31日 (五) 16:24 (CST)
如何讓一段文字被自然地框起來？
本人打算在一些文段中製造類似於小工具中「CSS、JS代碼高亮」的效果，於是寫了上方的example，但是問題來了：
- 例一：
預想效果：
测试测试测试测试测试测试exmaple测试测试测试测试测试测试
實際：
测试测试测试测试测试测试<div style="float:left;padding:0px 2px;<!--margin:2px;-->background:red;color:white}">example</div>测试测试测试测试测试测试
測試測試測試測試測試測試
測試測試測試測試測試測試
- 例二：
預想效果：
测试测试测试测试测试测试exmaple测试测试测试测试测试测试
實際：
测试测试测试测试测试<div style="float:none;padding:0px 2px;<!--margin:2px;-->background:red;color:white}">exampleexampleexampleexampleexample</div>测试测试测试测试测试
測試測試測試測試測試
測試測試測試測試測試
顯然，這段div沒有達到我預想的效果，如果要做到類似於「CSS、JS代碼高亮」的效果，我該如何做呢？ --Fetton論（✉緊募戰雙帕彌什系列條目編寫者），留言於: 2020年2月8日 (六) 23:51 (CST)
- 不太懂目標是要做成什麼效果。是要做成這樣嗎：
- 測試測試測試測試測試測試example測試測試測試測試測試測試--𝐃𝟒𝟏𝐃𝟖𝐂𝐃𝟗𝟖𝐅𝟎𝟎𝐁𝟐𝟎𝟒𝐄𝟗𝟖𝟎𝟎𝟗𝟗𝟖𝐄𝐂𝐅𝟖𝟒𝟐𝟕𝐄 2020年2月9日 (日) 01:06 (CST)
- 你需要
<span>；再不濟也得<div style="display:inline;">。 - div默認是一個block類型的標籤；過度簡化地說，div會在其前後換行。span則是一個默認in-line的標籤；除非樣式要求，否則span標籤內文字的behavior與未標記的文字基本相同。
- 你有興趣的話可以試試
<span style="display:inline-block;">。 - PS：我不知道你打不打得開W3Schools、英文好不好，但是他們的HTML、CSS教程和手冊真的很好用。一些代碼測試站也很適合練手。當然在萌百的沙盒或者用戶子頁面練手也可以，只是一般來講用不了複雜CSS語法……
- --GYARI! GYARI! GYARI! 不是公的驅逐艦的壹陸 討論·最近編輯 2020年2月9日 (日) 04:46 (CST)
- 以及w3school.com.cn，雖然我沒懂這兩家有啥關係_(:зゝ∠)_——From AnnAngela the Temporary Bureaucrat (Talk) 2020年2月9日 (日) 08:38 (CST)
如何在（帶有透明通道的）圖像後方再加上一個或多個圖像？
例子：模板:碧藍航線人物數據內所示的立繪欄部分。--Fetton論（✉緊募戰雙帕彌什系列條目編寫者），留言於: 2020年2月2日 (日) 22:39 (CST)
- 實話講，這是個大難事。1、沒有找到相關模板有此功能。2、萌百不支持CSS的background-image參數。
- 你可以參考我們崩壞3rd編輯組這裡的解決方案。該方案由User:Dave_12138提供並製作。但是具體實現還是有很大局限。目前該方案僅被使用在圖片尺寸提前修改一致的地方。
- 使用div的position: absolute來讓兩個圖片出現在同一個位置上，再通過設置z-index讓圖片重疊在另一張圖片上面。例：（注意保證height、width和圖片的大小相同，不然圖片就跑了。）
--Ktmsobs（討論） 2020年2月3日 (一) 14:36 (CST)
主要角色
|
| ||||||||||||||||||||||||||||||||||||
v2
|
|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
翻轉icon
| 代碼 |
|---|
{{hovers}}
<div style="display:inline-block; width:125px;">
<center>
<div class="hover-turn" style="width:105px; height:105px;">
<div class="hover-turn-before">
{{image|img=Palow-icon.jpg|wd=100|ht=100|radius=50|rad-dt=%|style=border-style: solid; border-radius: 75px; border-color:#FF69DE;|link=花譜}}
</div>
<div class="hover-turn-after">
{{image|img=VWP Kaf W2x MkI.png|wd=100|ht=100|radius=50|rad-dt=%|style=border-style: solid; border-radius: 75px; border-color:#FF69DE;|link=花譜}}
</div>
</div>
[[花譜|{{ruby|花譜|かふ}}]]
</center>
</div>
<div style="display:inline-block; width:125px;">
<center>
<div class="hover-turn" style="width:105px; height:105px; ">
<div class="hover-turn-before">
{{image|img=Rime1.jpg|wd=100|ht=100|radius=50|rad-dt=%|style=border-style: solid; border-radius: 75px; border-color:red;|link=理芽}}
</div>
<div class="hover-turn-after">
{{image|img=VWP Rlm W2x MkI.png|wd=100|ht=100|radius=50|rad-dt=%|style=border-style: solid; border-radius: 75px; border-color:red;|link=理芽}}
</div>
</div>
[[理芽|{{ruby|理芽|りめ}}]]
</center>
</div>
|
