隐藏网页中的文本，并在选中时显示它

Question

我有一个个人页面：http://matthieu.riegler.fr/index.html

我想在其中隐藏一个"小"巨魔脸，它仅在选择文本时才会出现。

任何知道我如何正确地做到这一点。

这就是我所拥有的。

#trollface {
float:left;
color: #F5FAFF; /* color of my background */
margin-top: -45em;
}

它

有效，但我认为它有点混乱。

所以有什么想法可以帮助我吗？ :)

感谢

Answer 1

您可以针对 CSS 规则的选定文本：

*::selection {
    color: ...
}
*::-moz-selection {
    color: ...
}

您可以尝试以这种方式放置背景图像。