position-watermark.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>固定位置水印</title>
    <link rel="stylesheet" type="text/css" href="css/watermark.css">
    <script type="text/javascript" src="js/watermark.js"></script>
</head>
<body>
    <div id="watermark-layer"></div>
    <script type="text/javascript">
        let watermarkLayer = document.getElementById('watermark-layer');
        let settings = {
            text : '文本水印',
            color : 'gray',
            fontFamily : '楷体',
            fontSize : '30px',
            opacity : 0.5, // 不透明度（范围 0~1: 0-完全透明，1-完全不透明）
            format : 'horizontal', // 版式：horizontal-水平，vertical-垂直，oblique-斜式
            style : 'position', // 水印风格：position-固定位置，repeat-重复
            xOffset : '30px', // x轴偏移量
            yOffset : '30px', // y轴偏移量
            positions : ['left-top', 'left-bottom', 'right-top', 'right-bottom', 'center']
        };
        new watermark.Text(watermarkLayer, settings).create();
    </script>
</body>
</html>