[笔记]CSS实现黑幕

使用CSS将文字和黑幕分别设置为两个不同的层，在鼠标悬停时改变黑幕的透明度来实现显现和消失的效果。

设置title属性可以使鼠标悬停文字上时显现的文字。

演示

这是黑幕。

1

<p>这是<span class="heimu" title="被你发现了？？！" style="--heimu-bg-color:#CCCCCC;">黑幕</span>。</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.heimu {
  position: relative;
}

.heimu:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--heimu-bg-color);
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 0.5s;
}

.heimu:hover:before {
  opacity: 0;
}

“黑幕”不一定代表其颜色是黑色，您可以通过设置heimu-bg-color改变其颜色。

不想逐一指定heimu-bg-color，您也可以将.heimu:before的background-color设置为var(--heimu-bg-color,black)，其中black为您想指定的默认颜色。

这是红色“黑幕”。

1

<p>这是<span class="heimu" title="被你发现了？？！" style="--heimu-bg-color: red;">红色“黑幕”</span>。</p>