英雄联盟bim，英雄联盟屏障图片

掩模层的基本版本。在基础课程中，有朋友想了解遮罩层。今天我们将通过4步完成英雄联盟官方网站的遮罩层效果。在开始之前，请准备10 天的基本课程知识。 ·第一步：HTML结构和基本样式。添加一个包含标题和两行文本的“Did”框。此时遮罩层位于主体结构下方，因此在遮罩层上写上一定的宽度和高度，并使用略透明的黑色背景色。我们来看看效果。写下标题和两行文字的字体大小和字体颜色，看看效果。

第二步：美化你的风格。将背景图像添加到遮罩层而不重复，调整位置，将内容在文本中居中，将标题设置为居中，并将两行文本设置为居中。我们来看看效果。将该边距添加到遮罩层以使内部内容垂直居中。第3步：调整遮罩层的位置。将遮罩层放置在绝对位置，在外边框处写上相对位置代码，开始设置位置即可看到效果。

·第四步：先隐藏遮罩层，当鼠标经过遮罩层时显示遮罩层。至此，遮罩层效果就完成了。您可以通过反向使用它、调整隐藏顺序以及添加一点位置偏移和颜色变化来使效果更好。下次我会讲一下如何灵活使用遮罩层。