css给前端页面添加水印效果体验

最新推荐文章于 2025-03-31 18:35:46 发布

桐溪漂流

最新推荐文章于 2025-03-31 18:35:46 发布

阅读量8.2k

点赞数 13

分类专栏： css 小知识点文章标签： css

本文链接：https://blog.csdn.net/qq564280420/article/details/116294418

版权

小知识点同时被 2 个专栏收录

25 篇文章

订阅专栏

css

5 篇文章

订阅专栏

本文通过CSS的pointer-events属性展示了如何创建不干扰交互的固定水印效果。水印元素设置为pointer-events:none，使其不可点击，并通过rotateZ(-45deg)实现倾斜显示。另外，讨论了使用水印背景图进行repeat显示作为替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

本次实现的时候只是为了体验下css的pointer-events的属性效果，所以就把水印做成了fixed的，体验上来说按照内容设定水印效果更佳，水印的个数和位置可以自己设定。

还有一种感觉更好的方法是给水印元素添加水印背景图，然后repeat显示，这样不需要设定水印个数。水印元素需要根据内容而定。eg：我的例子中的class=shuiyin的水印元素。

一、pointer-events

该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target

/* 除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。 */
.shuiyin{
    pointer-events: none;
}

二、实现效果

在这里插入图片描述

三、本次效果的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .shuiyin{
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            pointer-events: none;
        }
        .shuiyin-item{
            color: #999;
            pointer-events: none;
            display: inline-block;
            width: 300px;
            height: 50px;
            line-height: 50px;
            font-size: 20px;
            transform: rotateZ(-45deg);
        }
    </style>
</head>
<body>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div>防守打法涉及房第三方的收费的是否是的发斯蒂芬斯蒂芬是</div>
    <div class="shuiyin">
        <div class="shuiyin-item">this is shui yin !</div>
        <div class="shuiyin-item">this is shui yin !</div>
        <div class="shuiyin-item">this is shui yin !</div>
    </div>
</body>
</html>