前端案例：一个简单的HTML页面水印案例

2023-11-16

该代码主要演示:一个HTML页面显示水印

<!DOCTYPE html>
<html>
<head>
<style>
    .watermark {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
        z-index: 9999;
    }
    
    .watermark-text {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.1);
        position: absolute;
        transform: rotate(-45deg);
        margin: 300px;
        user-select: none; /* 禁止选择文本 */
    }
</style>
</head>
<body>
    <div id="watermark" class="watermark"></div>

    <script>
        function createWatermark() {
            var watermark = document.getElementById('watermark');
            var windowHeight = window.innerHeight;
            var windowWidth = window.innerWidth;
            var watermarkText = '';

            var numColumns = Math.ceil(windowWidth / 300);
            var numRows = Math.ceil(windowHeight / 300);

            for (var i = 0; i < numRows; i++) {
                for (var j = 0; j < numColumns; j++) {
                    watermarkText += '<span class="watermark-text" style="top: ' + (i * 300) + 'px; left: ' + (j * 300) + 'px;">Watermark</span>';
                }
            }

            watermark.innerHTML = watermarkText;
        }

        window.addEventListener('resize', createWatermark);
        createWatermark();
    </script>
</body>
</html>

阅读剩余

作者：Derek

链接：https://derekxx.cn/240.html

文章版权归作者所有，未经允许请勿转载。

THE END

泛微Ecology9-明细表根据浏览框控制其他字段显隐

<<上一篇

前端案例：HTML页面Tab页内表格行数据点击弹出模态框

下一篇>>