本文所有代码均来自萌娘百科
介绍#
黑条字指默认情况下是一个黑条,把鼠标悬停在黑条字上显示被遮挡的文字。
示例#
文字
使用方法#
将以下代码放到页面的 css 中
.heimu, .heimu a, a .heimu, .heimu a.new {
background-color: #252525;
color: #252525;
text-shadow: none;
}
.heimu:hover, .heimu:active,
.heimu:hover .heimu, .heimu:active .heimu {
color: white !important;
}
.heimu:hover a, a:hover .heimu,
.heimu:active a, a:active .heimu {
color: lightblue !important;
}
.heimu:hover .new, .heimu .new:hover, .new:hover .heimu,
.heimu:active .new, .heimu .new:active, .new:active .heimu {
color: #BA0000 !important;
}
实现黑幕效果,只需简单添加以下代码:在目标文字前加<span class="heimu" title="此处为悬浮在黑条上显示的字">
,并在目标文字后加上</span>
即可。这样,目标文字将会被覆盖在一个黑色半透明背景下,达到黑幕的效果。