黑幕（刮刮乐）

简介

萌娘百科里有种有趣的模板，叫做「黑幕」，能将文字遮蔽住，需要选中、指向或者点击，才能观看其中的文字。

演示

来交换准以还友也，了好几是一百以：的剧画风注意的自己写，这是一个测试 ❤，以及 链接。，来如此。

我都没这种时候就怎么冷刚好⋯有没有不是情自己那种：Internet Archive 运比有这在看到，¹ 维持喔喔以外你现在世界，起来很，实用年的他们一。

外链效果不佳，单纯使用纯文本黑幕大概就好。

实现

MkDocs 里也能实现黑幕，写法是：

<span class="heimu">这是一个测试。</span>

并且需要自定义主题，需要到仓库根目录，创建 overrides/main.html。

.
├─ overrides/
│  └─ main.html
└─ mkdocs.yml

然后使用覆盖块（Overriding blocks）的方式，添加自定义 CSS，需要在 main.html 中输入以下文字：

{% extends "base.html" %}

{% block styles %}
    {{ super() }}
<!-- 下面的「黑幕（刮刮乐）」CSS 来自：-->
<!-- 萌娘百科 https://web.archive.org/web/20220427162917/https://zh.moegirl.org.cn/MediaWiki:Mobile.css -->
<!-- 无限UCW [CSS+JS轻松实现自定义黑幕效果](https://ucw.moe/archives/js-with-css-implements-heimu.html) -->
<!-- 有经过一些修改，增加了选中也能显现，以及适配 Material for MkDocs 的明暗色调。 -->
<style>
.heimu, .heimu.a, .heimu > a {
    background-color: var(--md-default-fg-color);
    color: #00000000;
    text-shadow: none;
    transition: color 0.2s;
}

.heimu:hover, .heimu:active {
    color: var(--md-default-bg-color);
}

.heimu:hover.a, .heimu:active.a,
.heimu:hover > a, .heimu:active > a {
    color: var(--md-typeset-a-color);
}

.heimu::selection {
    background-color: var(--md-default-fg-color);
    color: var(--md-default-bg-color);
}

.heimu::selection.a, .heimu::selection > a {
    background-color: var(--md-default-fg-color);
    color: var(--md-typeset-a-color);
}
</style>
{% endblock %}

Obsidian 也可以使用，只是没有支持对链接黑幕，CSS 片段如下：

/*
    「刮刮乐」CSS
    来源自：
    无限UCW 的 [CSS+JS轻松实现自定义黑幕效果](https://ucw.moe/archives/js-with-css-implements-heimu.html)
    萌娘百科 https://web.archive.org/web/20220427162917/https://zh.moegirl.org.cn/MediaWiki:Mobile.css
    有经过一些修改，增加了选中也能显现，以及适配明暗色调，不支持链接。
*/

/*
--text-normal           表示文字颜色
--background-primary    表示背景颜色
*/

.heimu:hover{
    color: var(--background-primary);
}

.heimu {
    color: #00000000;
    background-color: var(--text-normal);
    transition: color 0.5s;
}

.heimu::selection {
    background-color: var(--text-normal);
    color: var(--background-primary);
}

在启用了 Attributes 插件的 MkDocs 或 Obsidian 中，对一段文字 进行黑幕，更容易：

需要进行黑幕的一段文字。
{: .heimu }

---

1. 演示脚注。 ↩

（由于更新时间是手动更新的，所以部分页面内容已更新，但忘记修改新的日期了……）