如何创造黑暗：htmlXcss的暗幕

上帝，盘古，或是其他的造物主，都诞生于黑暗

很多时候我们有想说但又咽回去的话。对方可以通过我们的表情、动作来了解这些“隐藏”的内容。可是，这种话写不出来。写出来就失去了潜行的效果。

当心，你的，背后。

所以我们有了暗幕。

这种东西最早的广泛使用应该是萌娘百科。萌娘上的词条要想没有暗幕，那得要足够冷门。暗幕在萌娘上的主要作用包括：

这种作用和删除线可能差不多。但是比删除线更好。因为如果不想看就可以不看，但是删除线仍然可以看到内容。这样的话暗幕就和白条（白底白字）差不多。但是白条难以准确地选定（在白色背景上，我们并不知道白条会有多长）。但是暗幕，长度很明确，也很吸引人。的的确确让人有“你知道的太多了”之感。

好的干说了这么久前戏，我们回到正题。怎么做一个暗幕呢？

最早萌娘上的暗幕是用<span>标签直接改颜色和背景色的。

<span style="color:#000000;background-color:#000000">暗幕</span>

后来在这个<span>里加上了一个title属性。

<span style="color:#000000;background-color:#000000" title="你知道的太多了">暗幕</span>

再后来因为使用的词条越来越多大概就是几个维护者特别喜欢用结果带动了不良风气，官方干脆就在编辑器里直接加了暗幕标签，也把暗幕标准化了。

于是我们看到的暗幕标签变成了这样。

<span class="heimu" title="你知道的太多了">暗幕</span>

至于anmu这个类，是定义在style.css里的。颜色也统一了一下，更加合理。

.heimu{
    color: #252525;
    background-color: #252525;
}

这样一来，这些标准化暗幕下面的文本，就只能由用户自己用光标选定之后才能看到了。

但是这样毕竟不方便，所以后来萌娘由把暗幕有关的css改成了这样。

.heimu{
    background-color: #252525;
    color: #252525;
    text-shadow: none;
    cursor: help;
}
.heimu:hover{
    color: white;
}

这样一来，用户只用把自己的鼠标移动到暗幕上就可以看到暗幕下方的内容。

至于本站的暗幕是怎么做的……

那就简单多了。直接定义一个anmu类。这样唯一的不足就是鼠标移动上去后没有提示：你知道的太多了。

anmu{
   color: #505050;
   background-color: #505050;
   cursor: help;
}
anmu:hover{
   color:#A0A0A0;
}

怎么样，是不是超简单，是不是又可以装逼了呢？

Comments