SCP基金会中文分部

🌈 拼合两个logo

使用code2参数可以拼合/融合两个不同的logo，一半在左边，一半在右边：

[[include :scp-wiki:component:pride-logos s10=-]
|code=左半边的代码
|code2=右半边的代码
]]

例如：

[[include :scp-wiki:component:pride-logos s10=-]
|code= nonbinary
|code2= pan
]]

这个代码会把非二元旗帜和泛性恋旗帜拼合在一起作为一个完整logo，可能对希望同时展示两个身份的人会比较有用。

如果你感觉以其它角度拼合左右两半更好看，可以加一个angle参数将拼合方向改为非垂直方向：

[[include :scp-wiki:component:pride-logos s10=-]
|code=第一个logo的代码
|code2=第二个logo的代码
|angle=拼合方向角，0-360
]]

0°是水平拼合。默认方向是垂直拼合（90°）。倾斜角从左侧（也就是x轴负半轴）开始，顺时针增加。

例如这样会把拼合方向改成60°：

[[include :scp-wiki:component:pride-logos s10=-]
|code=nonbinary
|code2=pan
|angle=60
]]

🌈 拼合三个logo（测试中）

如果你想把三个logo拼在一起，其会显示成一个平行的拼贴样式。

你依旧可以使用angle参数。可以用code3来指定第三个logo。

例如：

[[include :scp-wiki:component:pride-logos s10=-]
|code=trans-alt3
|code2=nonbinary-alt3
|code3=genderfluid-alt3
|angle=70
]]

[[div style="display: flex;
align-items: center;
justify-content: center;"]]

[[/div]]

此功能在基岩系版式上不可用。基岩系版式只支持拼合两个logo。

🌈 自行上传图片

如果你不满足于预制的这些logo，可以通过这个功能制作你自己的骄傲！请使用custom参数插入一个图片链接：

[[include :scp-wiki:component:pride-logos s10=-]
|custom=url(你的自定义logo的图片链接)
]]

代码里必须包括这个 url() 括号。

你仍然可以使用拼合功能（包括自定义角度功能）。你也可以把自定义的logo和组件预设的logo放在一起使用，比如：

[[include :scp-wiki:component:pride-logos s10=-]
|code=abro
|##dodgerblue|custom2=##url(@@https://example.com/my-image.png@@)
]]

或者三个一起（你仍然可以把code和custom放在一起使用）：

[[include :scp-wiki:component:pride-logos s10=-]
|custom=url(第一个自定义logo)
|custom2=url(第二个自定义logo)
|custom3=url(第三个自定义logo)
]]

最好使用长宽相等的图片，否则图片会被缩放拉伸。

🌈 其它进阶效果？

问：我可以拼合3个以上的logo吗？

目前不能。如果你想这么做，我建议先在Photoshop或者其它软件里把logo做成一张图，然后用custom方法自定义。

问：我可以给logo加动画吗？

目前CSS的@keyframe帧动画不能直接应用到 mask-image 属性上。如果想把logo做成动态的可能会非常麻烦。

问：这个页面的渐隐logo是怎么做的？我也可以用渐变吗？

可以。

此组件利用CSS蒙版来拼合logo。CSS蒙版可以将两张图片混合在一起，让其中一张图仅在蒙版范围内显示。

第二个logo会被切掉一半，然后放在第一个logo的上面。默认是在50%位置切开：

mask-image: linear-gradient(to right, transparent 50%, black 50%);

这是一个CSS渐变。logo图片会逐像素对应蒙版图片的透明度。你可以更改色标的位置，并添加一个mask参数来覆盖现有的mask-image：

[[include :scp-wiki:component:pride-logos s10=-]
|mask=渐变，矢量图，或者其它东西
]]

作为参考，本页的渐变logo（彩虹渐显）的写法是：

mask-image: linear-gradient(60deg, transparent 30%, black 60%);

只需要填入linear-gradient(60deg, transparent 30%, black 60%)这一部分。使用自定义蒙版之后，前文所述的angle参数将会被无效化。

整个代码应该写成：

[[include :scp-wiki:component:pride-logos s10=-]
|code=default
|code2=pride
|mask=linear-gradient(60deg, transparent 30%, black 60%)
]]

如果使用的是拼合3个logo的选项，你可以给第三个logo应用另外一个蒙版mask2。然而，显示效果可能会比较奇怪。