User: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>
|
