在博客上使用黑條字

2023年3月18日#教程 #博客 #技术390

AI 翻譯

這篇文章透過AI由簡體中文翻譯成繁體中文。查看原文

AI 生成的摘要

本文介紹了在個人博客上使用萌娘百科的黑條字的方法。只需將提供的CSS代碼添加到頁面的CSS中，即可實現黑幕效果。在目標文字前加`，並在目標文字後加上`即可。這樣，目標文字將被覆蓋在一個黑色半透明背景下，達到黑幕的效果。

本文所有程式碼均來自萌娘百科

介紹#

黑條字指預設情況下是一條黑色橫線，將滑鼠懸停在黑條字上會顯示被遮蔽的文字。

範例#

文字

使用方法#

將以下程式碼放到網頁的 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>即可。這樣，目標文字將會被覆蓋在一個黑色半透明背景下，達到黑幕的效果。