可以使用 CSS 在页面上制作水印效果，具体的方法如下：
- 在 HTML 文件中添加一个带有背景颜色的 div 元素作为页面的容器，并在其中添加一段文本作为水印的内容。
<div class="watermark-container">
<p class="watermark-text">这是一段水印文本</p>
</div>- 使用 CSS 为水印文本添加样式，包括设置透明度、旋转角度、字体大小、颜色等属性。
.watermark-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 24px;
color: rgba(0, 0, 0, 0.2);
}- 可以为水印文本的重要关键词添加高亮颜色，以突出显示。
.watermark-text span {
color: red;
font-weight: bold;
}- 可以使用 CSS 的 ::before 伪元素为水印文本添加背景，进一步增强水印效果。
.watermark-text::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-color: rgba(255, 255, 255, 0.5);
}完整的代码示例：
<div class="watermark-container">
<p class="watermark-text">这是一段<span>水印</span>文本</p>
</div>.watermark-container {
position: relative;
height: 100vh;
background-color: #f3f3f3;
}
.watermark-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
font-size: 24px;
color: rgba(0, 0, 0, 0.2);
}
.watermark-text span {
color: red;
font-weight: bold;
}
.watermark-text::before {
content: "";
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
z-index: -1;
background-color: rgba(255, 255, 255, 0.5);
}效果如下：
2023-05-09 13:12:43 更新
相关推荐
其他工具