{
"title": "在博客上使用黑条字",
"tags": [
"post",
"教程",
"博客",
"技术"
],
"summary": "在博客上使用萌娘百科黑条字的教程",
"sources": [
"xlog"
],
"external_urls": [
"https://endercat.xlog.app/zai-bo-ke-shang-shi-yong-hei-tiao-zi-md"
],
"date_published": "2023-03-18T13:29:29.000Z",
"content": "---\ntitle: 在博客上使用黑条字\ndate: 2023-03-18 13:29:29\ntags:\n - 教程\ndescription: 在个人博客上使用萌娘百科的黑条字\n---\n\n*本文所有代码均来自萌娘百科*\n\n介绍\n---\n\n黑条字指默认情况下是一个黑条，把鼠标悬停在黑条字上显示被遮挡的文字。\n\n示例\n---\n\n<span class=\"heimu\" title=\"悬停出现的字\">文字</span>\n\n使用方法\n---\n\n将以下代码放到页面的css中\n```\n.heimu, .heimu a, a .heimu, .heimu a.new {\n background-color: #252525;\n color: #252525;\n text-shadow: none;\n}\n.heimu:hover, .heimu:active,\n.heimu:hover .heimu, .heimu:active .heimu {\n color: white !important;\n}\n.heimu:hover a, a:hover .heimu,\n.heimu:active a, a:active .heimu {\n color: lightblue !important;\n}\n.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,\n.heimu:active .new, .heimu .new:active, .new:active .heimu {\n color: #BA0000 !important;\n}\n```\n\n实现黑幕效果，只需简单添加以下代码：在目标文字前加`<span class=\"heimu\" title=\"此处为悬浮在黑条上显示的字\">`，并在目标文字后加上`</span>`即可。这样，目标文字将会被覆盖在一个黑色半透明背景下，达到黑幕的效果。\n",
"attributes": [
{
"value": "zai-bo-ke-shang-shi-yong-hei-tiao-zi-md",
"trait_type": "xlog_slug"
}
]
}
