css:filter-blur内容模糊实现数据隐藏

简介: css:filter-blur内容模糊实现数据隐藏

image.png

<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>

需要注意的是:


内容隐藏后,依然可以再源码中看到原始数据,如果确实不想让用户看到原始数据,需要将字符替换为其他不能表达正确含义的字符代替,例如:*

内容隐藏仅仅是视觉上的看不见,鼠标依然可以选中复制

演示Demo:https://mouday.github.io/front-end-demo/css-filter.html


相关文章
|
前端开发 容器
面试官:请使用 CSS 实现自适应正方形
面试官:请使用 CSS 实现自适应正方形
429 0
面试官:请使用 CSS 实现自适应正方形
|
前端开发 JavaScript 开发者
利用 SplitingJS 配合 CSS 实现文字&quot;蠕动&quot;效果
利用 SplitingJS 配合 CSS 实现文字&quot;蠕动&quot;效果
292 2
|
29天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
29天前
|
前端开发
【web组件库系列】纯CSS实现典型网页数据分页器
【web组件库系列】纯CSS实现典型网页数据分页器
54 0
|
11月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
漏刻有时数据大屏CSS样式表成长教程(4):数据指标层叠排版
55 0
|
11月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
201 2
|
11月前
|
数据可视化 前端开发
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
漏刻有时数据大屏CSS样式表成长教程(2):九宫格图表背景自适应的解决方案
100 1
|
11月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
漏刻有时数据大屏CSS样式表成长教程(1)CSS绝对定位时水平居中的写法
51 0
|
移动开发 前端开发 小程序
【笔记】纯css实现列表水平滑动(图片或文字内容不限)
纯css实现列表水平滑动(图片或文字内容不限)
274 0
|
前端开发 容器
我已经说了5种css居中实现的方式了,面试官竟然说还不够?
这是一篇关于居中对齐方式的总结 开篇之前,先问一下大家都知道几种居中的实现方式? 面试时答出来两三个就不错了,就怕面试官还让你继续说。今天就来总结一下这些居中的方式 使用flex布局设置居中。 使用flex 时也能通过给子项设置margin: auto实现居中。 使用绝对定位的方式实现水平垂直居中。 使用grid设置居中。 使用grid时还能通过给子项设置margin: auto实现居中。 使用tabel-cell实现垂直居中。 还有一种不常用的方法实现垂直居中。 最后还有一种奇葩的方法。容器设置position: relative。孩子设置 top、left、bottom、right都设
134 0
我已经说了5种css居中实现的方式了,面试官竟然说还不够?