显示效果

css：filter-blur内容模糊实现数据隐藏_字符替换


代码

<body>
    <style>body {
        text-align: center;
      }

      /* 模糊样式 */
      .content--filter {
        filter: blur(5px);
      }</style>

    <!-- 直接显示 -->
    <div class="box">此曲只应天上有</div>
    <!-- 原内容遮罩 -->
    <div class="box content--filter">此曲只应天上有</div>
    <!-- 内容替换遮罩 -->
    <div class="box content--filter">******</div>
  </body>

需要注意的是：

  1. 内容隐藏后，依然可以再源码中看到原始数据，如果确实不想让用户看到原始数据，需要将字符替换为其他不能表达正确含义的字符代替，例如：​​*​​
  2. 内容隐藏仅仅是视觉上的看不见，鼠标依然可以选中复制