图片呈现样式

注意：这是本网站使用的组件页面

组件页面一般通过[[include]]方式使用。

请不要随意编辑此页面以免造成不必要的崩溃。

如果你需要报告错误，请前往页面讨论区。

---

这是什么

在这个维基上你可以使用的图片呈现样式的扩展，可以用于你的档案、文章、故事或者任何页面。

使用方法

此处大多数组件使用方法无需额外解释，但是仍有需要注意的地方。

• 所有的 true/false 参数不应被省略。
• 图像可以具有浮动属性，这意味着你可以应用文字环绕样式。如果你选择了 |float=true 参数（即允许图片浮动），那么你必须同时应用|align=left/right参数以确定图片的浮动方向。
• 宽度参数设定的是图片的最大宽度。在移动设备上，图片至多应该占屏幕一半宽度。如果希望更改这一点，你需要编辑下列CSS属性的值。

  image-block[data-feature="image-feature"] {
      max-width: [$在此处填入数值] !important;
  }

  
  
• 图片注释不是必填的。如果你选择了 |add-caption=false 参数（即启用图片注释），那么你必须同时应用 |caption=text 参数来填入注释。
• 推荐填入Alt参数。所有的图片都具有 |alt=alt|alt-text=图片替代文本 参数。这部分内容可以省略但是我们推荐你填写他们。Alt-text 文本应当描述当前图片呈现的内容，当图片加载不出来的时候这很有用。
• 噪点呈现样式和像素化呈现样式都是通过[[iframe]]应用HTML文档呈现的。在一般情况下他们能够正常工作，但有时候可能出现问题。

多行注释

让你可以在注释中使用多于一行文字。
在所有代码片段中：

|add-caption=true
|caption=这段文字相当相当十分十分非常非常长长长，它最后肯定要换行。 _
在你需要换行的地方添加一个空格后接下划线(" _") _
记得添加空格，否则组件会失效。 _
在下划线后面不能有空格，否则同样会失效。

---

图片呈现样式

悬停模糊样式

在移动设备上轻触以显示

模糊参数的值过大可能让图片呈现很奇怪。

[[include component:image-features-source |blur-reveal=--]
|blur-amount=数值 推荐值为1.5 - 5，数字越大图片越模糊
|speed=Number 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem/vw/% 允许使用所有单位
|url=url
|alt=alt|alt-text=图片描述
|add-caption=true/false
|caption=文本
]]

---

悬停切换样式

在移动设备上轻触以显示

此呈现样式在两张图片宽高比例相同时效果最好。

[[include component:image-features-source |image-change=--]
|blur-amount=数值 推荐值为1.5 - 5，数字越大图片越模糊
|speed=数值 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem/vw/% 允许使用所有单位
|start-url=url 第一张图片的链接。
|hover-url=url 第二张图片的链接。
|alt1=alt|alt1-text=第一张图片的替代文本。
|alt2=alt|alt2-text=第二张图片的替代文本。
|add-caption=true/false
|caption=描述文本
]]

---

悬停模糊揭开样式

在移动设备上轻触以显示

Firefox浏览器适配由 EstrellaYoshte 完善。

slide-direction描述的是蒙版消去的方向。

[[include component:image-features-source |slide-blur-reveal=--]
|blur-amount=数值 推荐值为1.5 - 5，数字越大图片越模糊
|slide-direction=left/right/top/bottom 表明蒙版将向哪个方向移动
|float=true/false
|align=left/right
|speed=Number 过渡时间，单位为毫秒(ms)
|width=px/rem/vw/% 允许使用所有单位
|url=url
|alt=alt|alt-text=图片替代文本
|add-caption=true/false
|caption=描述文本
]]

---

悬停黑块揭开样式

在移动设备上轻触以显示

与上一个组件相同。
slide-direction描述的是蒙版消去的方向。

[[include component:image-features-source |slide-block-reveal=--]
|block-color=hex/rgb/hsl 允许使用所有颜色格式
|slide-direction=left/right/top/bottom 表明蒙版将向哪个方向移动
|speed=Number 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem/vw/% 允许使用所有单位
|url=url
|alt=alt|alt-text=图片替代文本
|add-caption=true/false
|caption=描述文本
]]

---

图片拖拽切换

通过修改slider-color参数
你可以更换滑块的颜色。

[[include 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/% 允许使用所有单位
|alt1=alt|alt1-text=左侧图片的替代文本。
|alt2=alt|alt2-text=右侧图片的替代文本。
|add-caption=true/false
|caption=描述文本
]]

---

悬停噪点样式

在移动设备上轻触以显示

更小的噪点尺寸可以让图片更加整体。
尝试一下！

[[include component:image-features-source |noise-reveal=--]
|fractal-size=1-999 数值越大，噪点越多
|speed=Number 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem 无法使用vw/%
|background=color/url("")/gradient 允许使用所有背景（纯色背景/图片背景/渐变背景）
|url=url
|alt=alt|alt-text=图片替代文本
|add-caption=true/false
|caption=描述文本
]]

---

悬停像素化样式

在移动设备上轻触以显示

此效果是通过[[iframe]]呈现的。
如果可能，每个页面最好至多使用一次此样式。

[[include component:image-features-source |pixel-reveal=--]
|pixel-res=Number 推荐值为4-32，数字越大像素块越大
|speed=Number 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem 无法使用vw/%
|url=url
|alt=alt|alt-text=图片替代文本
|add-caption=true/false
|caption=描述文本
]]

---

图片缩放样式

悬浮放大

在移动设备上轻触以放大

enlarge-amount=6将使图片会放大到原本的1.6倍。
enlarge-amount=x将使图片放大到原本的 (1+0.1x) 倍。

[[include component:image-features-source |hover-enlarge=--]
|enlarge-amount=Number 推荐值为5-20，数字越大，悬停尺寸越大
|speed=数值 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem/vw/% 允许使用所有单位
|url=url
|alt=alt|alt-text=图片替代文本
|add-caption=true/false
|caption=描述文本
]]

---

持续点按全屏显示

在移动设备上轻触以全屏显示

speed的数值决定了当你点击/轻触时，
图片前往屏幕中心的速度。

✖

[[include component:image-features-source |click-fullscreen=--]
|speed=数值 过渡时间，单位为毫秒(ms)
|float=true/false
|align=left/right
|width=px/rem/vw/% 允许使用所有单位
|url=url
|alt=alt|alt-text=图片替代文本
|add-caption=true/false
|caption=描述文本
]]