突然设计搞了一种想法，当遮罩层谈起来的时候，能不能搞一种模糊让用户看不清遮罩层下面的内容
然后ui小姐姐说，要是做不出来 就不做了，我说能做出来，怎么能让ui小姐姐看不起呢
先看下 加模糊滤镜之前的效果
然后加上模糊滤镜之后的效果呢
是不是很不一样呢
其实滤镜这个东西很多前端小伙伴都知道这个东西
filter 属性 则是 blur 单位是 px 其实上面的我设置了 5px 都很模糊了
都知道这个东西 但是 一次性就加成功 可能有点困难哈
<section>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, ea ex optio, mollitia placeat voluptate consequaturdignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? Quia iste soluta quas?Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, ea ex optio, mollitia placeat voluptate consequaturdignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? Quia iste soluta quas?Loremipsum dolor sit amet consectetur adipisicing elit. Itaque, ea ex optio, mollitia placeat voluptate consequaturdignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? Quia iste soluta quas?Loremipsum dolor sit amet consectetur adipisicing elit. Itaque, ea ex optio, mollitia placeat voluptate consequaturdignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? Quia iste soluta quas?Loremipsum dolor sit amet consectetur adipisicing elit. Itaque, ea ex optio, mollitia placeat voluptate consequaturdignissimos necessitatibus deserunt dolor ab fuga, alias laudantium unde reprehenderit? Quia iste soluta quas?</section><div class="parent">ui小姐姐</div><div class="meng"></div>
其实这个滤镜就是 你想让用户在那个地方看到滤镜 就在那个元素身上加上这个属性 可能有的小伙伴认为我想在遮罩层上加上滤镜 其实那样效果不明显 甚至可以说没有呢
我们其实是想让下面的文字模糊起来 那么 我们就在section 那个标签上加上那个属性就可以了
section { filter: blur(5px);}
是不是很简单呢 其实 百度上面 著名人物去世的时候 那种灰白效果也是 用滤镜来做的 这个就看小伙伴自己去调查了 哈哈
关注我 持续更新前端知识
