特色插图

注意

此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。

未经组件作者或工作人员允许，请勿修改此页的内容。

---

这是什么？

一个另类的 [插图方块] 合集，为你的文章、SCP、故事或任何东西中的插图提供额外的互动性！

使用方法

大多数都不言而喻，但有几个共同特点：

• 在 SIGMA-9 和黑色标记笔上均可使用
• 任何 true/false 选项必须添加。
• 图像可以浮动。这意味着文本将会环绕它们。如果你设置 |float=true，你也需要选择 |align=left/right。这决定了图像将浮动在屏幕的哪一侧。
• 宽度（width）为最大宽度。在移动端上，图像永远保持为 50% 屏幕最大宽度。如果你想改变，你必须编辑 CSS 值。

  .scp-image-block[data-feature="image-feature"] {
  max-width: [在此添加宽度] !important;
  }

• 说明文字为可选项！如果你设置 |add-caption=false，你不需要添加 |caption=文本。
• 分形噪点揭示和马赛克揭示都使用了 iframe 中的 HTML…在 Wikidot 上会有点奇怪。他们应该能正常工作，但确实有出现问题的可能。
• 如果你还有任何问题或要求，请随时联系 Woedenaz。不能保证我会很快回复，不过我会尽力而为！

多行说明文字

你可以添加多行说明文字。
只需像这样设置代码格式：

|add-caption=true
|caption=这是一段无比长的说明文字，最终将换行。 _
你只需要在行末添加一个空格和一个下划线。 _
记得添加空格，否则无效。 _
在下划线之后添加空格也无效。

---

图像揭示

悬停模糊揭示

移动端轻触模糊揭示

很多模糊可能最终看起来会很奇怪。

[[include :scp-wiki:component:image-features-source |blur-reveal=--]
|blur-amount=数值 推荐 1.5 - 5。更高的数值 = 更加模糊！
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem/vw/% 任何长度单位均可。
|url=url 地址
|add-caption=true/false
|caption=文本
]]

---

悬停模糊切换图像

移动端轻触模糊切换图像

如果两张图像长宽比一致效果更佳。

[[include :scp-wiki:component:image-features-source |image-change=--]
|blur-amount=数值 推荐 1.5 - 5。更高的数值 = 更加模糊！
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem/vw/% 任何长度单位均可。
|start-url=url 地址 悬停之前的图像 URL 地址。
|hover-url=url 地址 悬停之后的图像 URL 地址。
|add-caption=true/false
|caption=文本
]]

---

悬停滑动模糊揭示

移动端轻触滑动模糊揭示

支持火狐的模糊滑动代码由 EstrellaYoshte 提供！

滑动方向代表移动远离的方向。

[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]
|blur-amount=数值 推荐 5 - 10。更高的数值 = 更加模糊！
|slide-direction=left/right/top/bottom 滑动远离的方向。
|float=true/false
|align=left/right
|speed=数值 动画速度（毫秒）
|width=px/rem/vw/% 任何长度单位均可。
|url=url 地址
|add-caption=true/false
|caption=文本
]]

---

悬停滑动方块揭示

移动端轻触滑动方块揭示

此处滑动方向并非不同。
滑动亦将从此方向远离。

[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl 任何颜色格式均可。
|slide-direction=left/right/top/bottom 滑动远离的方向。
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem/vw/% 任何长度单位均可。
|url=url 地址
|add-caption=true/false
|caption=文本
]]

---

滑动图片揭示

滑动按钮箭头将从
黑色变为白色
取决于 slider-color！

[[include :scp-wiki:component:image-features-source |slide-revealer=--]
|block-color=hex/rgb/hsl 任何颜色格式均可。
|float=true/false
|align=left/right
|width=px/rem/vw/% 任何长度单位均可。
|left-url=url 这是左侧图片的链接。
|right-url=url 这是右侧图片的链接。
|slider-start-percent=0-100 滑杆距离左侧的距离百分比。
|slider-color=hex/rgb/hsl 任何颜色格式均可。
|slider-circle-size=px/rem/vw/% 任何长度单位均可。
|add-caption=true/false
|caption=文本
]]

---

悬停分形噪点揭示

移动端轻触分形噪点揭示

较细的分形尺寸看起来非常整洁。
试试看！

[[include :scp-wiki:component:image-features-source |noise-reveal=--]
|fractal-size=1-999 更高的数值代表更细的分形。
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem 不允许 vw/%。
|background=color/url("")/gradient 任何形式的背景均可。
|url=url 地址
|add-caption=true/false
|caption=文本
]]

---

悬停马赛克揭示

移动端轻触马赛克揭示

完全由 iframe 实现。
如有可能，请尽量每页只用一个。

[[include :scp-wiki:component:image-features-source |pixel-reveal=--]
|pixel-res=数值 更高的数值代表更大的马赛克。（推荐 4-32）
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem 不允许 vw/%。
|url=url 地址
|add-caption=true/false
|caption=文本
]]

---

图像缩放

悬停放大

移动端轻触放大

enlarge-amount=6 代表放大为原尺寸的 1.6 倍。
enlarge-amount=20 代表放大 3.0 倍。

[[include :scp-wiki:component:image-features-source |hover-enlarge=--]
|enlarge-amount=数值 更高的数值代表更大的倍率。（推荐 5-20）
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem/vw/% 任何长度单位均可。
|url=url 地址
|add-caption=true/false
|caption=文本
]]

---

点击并按住以全屏

移动端轻触全屏

这里的速度指
当点击/轻触时
图像淡入屏幕中心的速度。

✖

[[include :scp-wiki:component:image-features-source |click-fullscreen=--]
|speed=数值 动画速度（毫秒）
|float=true/false
|align=left/right
|width=px/rem/vw/% 任何长度单位均可。
|url=url 地址
|add-caption=true/false
|caption=文本
]]