css给前端页面添加水印效果体验_css水印-CSDN博客

安宇雨 - 随手采集
2024-08-28 14:51:00
随手采集
0000-未整理-等待研究

前言

本次实现的时候只是为了体验下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>

原网址: 访问
创建于: 2024-08-28 14:51:06
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论