一种不使用背景图像的水印解决方法是使用CSS伪元素和文字阴影效果。
以下是一个示例代码:
HTML:
这是一个水印
CSS:
.watermark {
position: relative;
display: inline-block;
}
.watermark::after {
content: "水印";
position: absolute;
top: 0;
left: 0;
color: rgba(0, 0, 0, 0.1); /* 设置水印文字的颜色和透明度 */
pointer-events: none; /* 防止水印文字遮挡其他元素的交互 */
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); /* 设置水印文字的阴影效果 */
}
上述代码中,我们使用了一个用于显示水印的 通过调整::after
来插入水印文字。通过设置content
属性来定义伪元素的内容。我们还可以通过调整color
属性来控制水印文字的颜色和透明度。使用pointer-events: none;
可以防止水印文字遮挡其他元素的交互。最后,通过设置text-shadow
属性来创建水印文字的阴影效果。
color
和text-shadow
属性的值,您可以自定义水印的外观。相关内容