最新HTML水印背景，水印不可复制，直接上手用，免费

最新推荐文章于 2024-03-26 18:14:53 发布

不太会写

最新推荐文章于 2024-03-26 18:14:53 发布

阅读量617

点赞数 13

文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/m0_62996549/article/details/136455237

版权

老样子，先上截图！

然后

然后，直接上代码：不会就看，备注都打好了，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>不太会写</title>

</head>
<body>

<div class="img-crt">
    <canvas id="my-cvs" width="100" height="100"></canvas>
</div>

<div class="container">

    <div class="content">
                <img src="../assets/background.jpg" alt="图片描述">
    </div>
</div>

</body>
<script>
    //确定一下水印文字字体大小
    var cvs = document.getElementById("my-cvs");
    const ctx = cvs.getContext('2d');
    //颜色字体
    ctx.font = "14px Arial";
    ctx.fillStyle = '#524d4d';
    //文字渲染成45度角
    ctx.rotate(-45 * Math.PI / 180);
    // 、、这里（-30，60）就是文字左下角坐标
    ctx.fillText("阿鑫不太会写", -30, 60);

    //最后，将画布上所做的水印图片转换成base64码，给body元素作为背景图片：
    // 将canvas元素隐藏在页面中，或者把它用js从dom中删除。
    var dataURL = cvs.toDataURL("image/png");
    document.body.style.backgroundImage = 'url(' + dataURL + ')';
    document.body.style.backgroundRepeat = "repeat";


</script>
<style>
    .img-crt {
        position: absolute;
        z-index: 10;
        top: 100px;
        left: 0;
        visibility: hidden;
    }

    .container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 100vh;
    }

    .content {
        text-align: center;
        position: relative;
    }

    img {
        max-width: 100%;
        height: auto;
    }

</style>

</html>