特色插图
2021年3月12日
修订 2
评分
12
↑ 12
↓ 0
支持率
100%
总票数 12
Wilson 95% 下界
75.7%
在相同票数下更稳健的支持率估计
争议指数
0.000
评分趋势
按周聚合 加载图表中...
最近修订
1 / 1
最近投票
1 / 2
2025-05-31
2024-09-03
2024-09-03
2024-09-03
2024-09-03
2023-01-09
2022-12-10
2022-09-16
2022-09-16
2022-05-24
相关页面
暂无推荐
页面源码
[[include :scp-wiki-cn:theme:black-highlighter-theme]]
[[module css]]
div.image-example {
border: 0.0625rem dashed rgb(var(--swatch-menubg-medium-dark-color));
background-color: rgb(var(--swatch-menubg-light-color));
margin: 0;
padding: 1em !important;
}
#page-title, h1, h2, h3, h4, .centered {
text-align: center;
}
h2 {
margin-bottom: 0;
padding-bottom: 0;
}
h3 {
margin-top: -0.4em;
}
span.pointer {
font-family: var(--body-font);
display: inline-block;
height: 0.8125rem;
line-height: 0.750rem;
line-height: 0.8125rem;
font-size: 0.625rem;
font-size: 0.6875rem;
background: rgb(var(--swatch-primary-darkest));
color: rgb(var(--swatch-menutxt-light-color));
-webkit-border-bottom-right-radius: 0.25rem;
-moz-border-radius-bottomright: 0.25rem;
border-bottom-right-radius: 0.25rem;
-webkit-border-top-right-radius: 0.25rem;
-moz-border-radius-topright: 0.25rem;
border-top-right-radius: 0.25rem;
margin: 0 0 0 .75rem;
padding: 0.1875rem 0.3125rem 0.1875rem 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
span.pointer::before,
span.pointer::after {
float: left;
position: relative;
}
span.pointer::before {
content: "";
top: -0.1875rem;
left: -0.625rem;
width: 0;
height: 0;
border-color: transparent rgb(var(--swatch-primary-darkest)) transparent transparent;
border-style: solid;
border-width: 0.5rem 0.5rem 0.5rem 0;
padding: 0 0.0625rem 0.1875rem;
}
span.pointer::after {
--box-shadow: rgb(var(--swatch-primary-darkest));
content: "";
top: 0;
left: -0.5rem;
width: 0.5rem;
height: 1rem;
color: rgb(var(--swatch-menutxt-light-color));
-webkit-box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
-moz-box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
box-shadow: -0.0625rem -0.0625rem 0.125rem var(--box-shadow);
font-size: 1rem;
line-height: 0.6em;
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 26.5933838 19.6584473' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='26.5933838,5.1333008 7.7148438,5.1333008 7.7148438,0 0,9.6740723 7.7148438,19.6584473 7.7148438,14.0671387 26.5933838,14.0671387 '/%3E%3C/svg%3E%0A");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1rem auto;
mask-size: 1rem auto;
background-color: rgb(var(--swatch-menutxt-light-color));
}
@media only screen and (max-width:500px) {
span.pointer {
width: -webkit-calc(100% - 1rem);
width: -moz-calc(100% - 1rem);
width: calc(100% - 1rem);
height: auto;
padding-left: 0.5rem;
line-height: 1.5em;
}
span.pointer::before {
dislay: none;
}
span.pointer::after {
-webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.2' baseProfile='tiny' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 19.6584473 26.5933838' overflow='visible' xml:space='preserve'%3E%3Cpolygon fill='%23FFFFFF' points='14.5251465,26.5933838 14.5251465,7.7148438 19.6584473,7.7148438 9.984375,0 0,7.7148438 5.5913086,7.7148438 5.5913086,26.5933838 '/%3E%3C/svg%3E%0A");
-webkit-mask-size: contain;
mask-size: contain;
mask-position: center center;
}
}
[[/module]]
+ 这是什么？
[[=]]
**一个另类的 {{[插图方块]}} 合集，为你的文章、SCP、故事或任何东西中的插图提供额外的互动性！**
[[/=]]
+ 使用方法
[[=]]
大多数都不言而喻，但有几个共同特点：
[[/=]]
[[ul_]]
[[li]]**在 SIGMA-9 和黑色标记笔上均可使用**[[/li]]
[[li]]**任何 {{true/false}} 选项必须添加。**[[/li]]
[[li]]**图像可以浮动。**这意味着文本将会环绕它们。如果你设置 {{|float=true}}，你也需要选择 {{|align=left/right}}。这决定了图像将浮动在屏幕的哪一侧。[[/li]]
[[li]]**宽度（width）为最大宽度。**在移动端上，图像永远保持为 50% 屏幕最大宽度。如果你想改变，你必须编辑 CSS 值。
[[div class="code"]]
.scp-image-block[data-feature="image-feature"] {
@@ @@max-width: [在此添加宽度] !important;
}
[[/div]][[/li]]
[[li]]**说明文字为可选项！**如果你设置 {{|add-caption=false}}，你不需要添加 {{|caption=文本}}。[[/li]]
[[li]]分形噪点揭示和马赛克揭示都使用了 iframe 中的 HTML...在 Wikidot 上会有点奇怪。他们//应该//能正常工作，但确实有出现问题的可能。[[/li]]
[[li]]如果你还有任何问题或要求，请随时联系 [[*user Woedenaz]]。不能保证我会很快回复，不过我会尽力而为！[[/li]]
[[/ul]]
++ 多行说明文字
[[=]]
你**可以**添加多行说明文字。
只需像这样设置代码格式：
[[/=]]
[[div_ class="code"]]
@@|add-caption=true@@
@@|caption=这是一段无比长的说明文字，最终将换行。 _@@
@@你只需要在行末添加一个空格和一个下划线。 _@@
@@记得添加空格，否则无效。 _@@
@@在下划线之后添加空格也无效。@@
[[/div]]
~~~~
------
~~~~
+ 图像揭示
++ 悬停模糊揭示
+++ 移动端轻触模糊揭示
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |blur-reveal=--]
|blur-amount=1.5
|speed=60
|float=false
|width=18.75rem
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption=很多模糊可能最终看起来会很奇怪。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |blur-reveal=--]@@
|blur-amount=数值 [[span class="pointer"]]推荐 1.5 - 5。更高的数值 = 更加模糊！[[/span]]
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 悬停模糊切换图像
+++ 移动端轻触模糊切换图像
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |image-change=--]
|blur-amount=20
|speed=1000
|float=false
|width=18.75rem
|start-url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|hover-url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/scp-4378-noodleverse.png
|add-caption=true
|caption=如果两张图像长宽比一致效果更佳。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |image-change=--]@@
|blur-amount=数值 [[span class="pointer"]]推荐 1.5 - 5。更高的数值 = 更加模糊！[[/span]]
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|start-url=url 地址 [[span class="pointer"]]悬停之前的图像 URL 地址。[[/span]]
|hover-url=url 地址 [[span class="pointer"]]悬停之后的图像 URL 地址。[[/span]]
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 悬停滑动模糊揭示
+++ 移动端轻触滑动模糊揭示
[[=]]
**支持火狐的模糊滑动代码由 [[*user EstrellaYoshte]] 提供！**
[[/=]]
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]
|blur-amount=5
|slide-direction=right
|speed=640
|float=false
|width=18.75rem
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption=滑动方向代表移动远离的方向。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |slide-blur-reveal=--]@@
|blur-amount=数值 [[span class="pointer"]]推荐 5 - 10。更高的数值 = 更加模糊！[[/span]]
|slide-direction=left/right/top/bottom [[span class="pointer"]]滑动远离的方向。[[/span]]
|float=true/false
|align=left/right
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 悬停滑动方块揭示
+++ 移动端轻触滑动方块揭示
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]
|block-color=rgb(0,0,0)
|slide-direction=top
|speed=640
|float=false
|width=18.75rem
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption=此处滑动方向并非不同。 _
滑动亦将从此方向远离。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |slide-block-reveal=--]@@
|block-color=hex/rgb/hsl [[span class="pointer"]]任何颜色格式均可。[[/span]]
|slide-direction=left/right/top/bottom [[span class="pointer"]]滑动远离的方向。[[/span]]
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 滑动图片揭示
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |slide-revealer=--]
|float=false
|width=18.75rem
|left-url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|right-url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/scp-4378-noodleverse.png
|slider-start-percent=50
|slider-color=white
|slider-circle-size=1.875rem
|add-caption=true
|caption=滑动按钮箭头将从 _
黑色变为白色 _
取决于 slider-color！
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |slide-revealer=--]@@
|block-color=hex/rgb/hsl [[span class="pointer"]]任何颜色格式均可。[[/span]]
|float=true/false
|align=left/right
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|left-url=url [[span class="pointer"]]这是左侧图片的链接。[[/span]]
|right-url=url [[span class="pointer"]]这是右侧图片的链接。[[/span]]
|slider-start-percent=0-100 [[span class="pointer"]]滑杆距离左侧的距离百分比。[[/span]]
|slider-color=hex/rgb/hsl [[span class="pointer"]]任何颜色格式均可。[[/span]]
|slider-circle-size=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 悬停分形噪点揭示
+++ 移动端轻触分形噪点揭示
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |noise-reveal=--]
|fractal-size=995
|speed=1000
|float=false
|width=18.75rem
|background=rgb(var(--swatch-menubg-dark-color));
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption=较细的分形尺寸看起来非常整洁。 _
试试看！
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |noise-reveal=--]@@
|fractal-size=1-999 [[span class="pointer"]]更高的数值代表更细的分形。[[/span]]
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem [[span class="pointer"]]不允许 vw/%。[[/span]]
|background=color/url("")/gradient [[span class="pointer"]]任何形式的背景均可。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 悬停马赛克揭示
+++ 移动端轻触马赛克揭示
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |pixel-reveal=--]
|pixel-res=32
|speed=1000
|float=false
|width=18.75rem
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption=完全由 iframe 实现。 _
如有可能，请尽量每页只用一个。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |pixel-reveal=--]@@
|pixel-res=数值 [[span class="pointer"]]更高的数值代表更大的马赛克。（推荐 4-32）[[/span]]
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem [[span class="pointer"]]不允许 vw/%。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
+ 图像缩放
++ 悬停放大
+++ 移动端轻触放大
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |hover-enlarge=--]
|enlarge-amount=6
|speed=120
|float=false
|width=18.75rem
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption={{enlarge-amount=6}} 代表放大为原尺寸的 1.6 倍。 _
{{enlarge-amount=20}} 代表放大 3.0 倍。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |hover-enlarge=--]@@
|enlarge-amount=数值 [[span class="pointer"]]更高的数值代表更大的倍率。（推荐 5-20）[[/span]]
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]
~~~~
------
~~~~
++ 点击并按住以全屏
+++ 移动端轻触全屏
[[div_ class="image-example"]]
[[include :scp-wiki:component:image-features-source |click-fullscreen=--]
|speed=320
|float=false
|width=18.75rem
|url=https://scp-wiki.wdfiles.com/local--files/component%3Aimage-features/noodle.jpg
|add-caption=true
|caption=这里的速度指 _
当点击/轻触时 _
图像淡入屏幕中心的速度。
]]
[[div_ class="code"]]
@@[[include :scp-wiki:component:image-features-source |click-fullscreen=--]@@
|speed=数值 [[span class="pointer"]]动画速度（毫秒）[[/span]]
|float=true/false
|align=left/right
|width=px/rem/vw/% [[span class="pointer"]]任何长度单位均可。[[/span]]
|url=url 地址
|add-caption=true/false
|caption=文本
]]
[[/div]]
[[/div]]