CSS半透明磨砂效果实现

最近在搭建个人网站，想做一点炫酷或是优雅的效果。记录一下这两天摸索出的搭配。首先就是磨砂半透明。
我们都知道w3c标准有一个很炫酷的效果：filter:blur();该效果能够实现高斯模糊，参数为高斯模糊的半径。

但是如果我们直接将一个高斯模糊的效果作用在一个背景元素上，那么前景元素上的所有文字也会被模糊，来一个例子演示一下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="wrapper"><div class="block"><p>这是一段文字:XXXXXXXXX</p><p>这也是一段文字</p></div></div></body></html><style>body {background-image: url("https://pic3.zhimg.com/v2-b7408711f99a5dc49decc3ce0aee6ac6_r.jpg");background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}.wrapper {position: absolute;display: flex;justify-content: center;align-items: center;left: 0;right: 0;top: 0;bottom: 0;}.block {font-size: 30px;color: rgb(0,32,237);}</style>

现在文字容器背景加一个高斯模糊，修改.block：

 .block {font-size: 30px;color: rgb(0,32,237);filter: blur(20px);}

效果如下：

可以看到，中心的文字都模糊掉了，这可不是我们想要的效果。解决方法为：使用backdrop-filter代替flilter：

    .block {font-size: 30px;color: rgb(0,32,237);backdrop-filter: blur(20px);}

效果如下：

但是如此其实还算不够，因为如果你需要将模糊效果施加在很大的一片区域上的话，直接使用全屏的高斯模糊不仅会让人感到视觉疲劳，而且会降低前景区域的对比度，让人们阅读一些白色，灰色文字时感到困难。比如，我们来看某位大佬的博客：

这就不是使用简单的高斯模糊实现的。要实现这样的效果，我个人摸索出的方法就是：

高斯模糊层+透明层

比如刚才的例子，就可以这么修改.block：

    .block {font-size: 30px;border-radius: 2em;backdrop-filter: blur(20px);background-color: rgba(255, 255, 255, 0.5);}

效果如下：

再加一个圆角，调整一下padding就完美了：

    .block {font-size: 30px;color: rgb(0,32,237);padding: 10px;border-radius: 2em;backdrop-filter: blur(20px);background-color: rgba(255, 255, 255, 0.5);}

效果如下：

基于这个效果，制作一个简约风格的登陆页面就很简单了

CSS半透明磨砂效果实现相关推荐

C#实现winform仿div+css半透明遮罩效果
本文实现在winform项目实现网页div+css关透明效果,挺帅的,在网页中要实现div的半透明遮罩层效果不难,在winform项目就不是这么容易了,下面我们来看下效果图先: 正常时: 文章来自 ...
html磨砂效果,使用css制作磨砂效果
要点:给需要磨砂的div(设rgba的那个元素) => 设置伪元素: 给伪元素content: ''.绝对定位,四处为0,left:0.... 给伪元素一样的背景图,并给z-index: -1 ...
iOS磨砂（半透明）效果实现
291F12A6-B038-4D48-9A26-E650F2BE2D1A.png 上图是我做的一个小demo里面的截图,如图所示,弹出框的背景是现在app大量使用的半透明磨砂效果,那么如果去实现这种效 ...
html5磨砂透明首页制作,如何制作磨砂效果的顶部固定导航菜单
使用过iOS 7的朋友会看到上面有一种非常酷的顶部固定导航菜单效果-磨砂效果.顶部导航菜单是半透明的模糊效果,当往下滚动页面的时候,顶部导航菜单遮住页面的内容,因为它是半透明的,它下面的内容淡淡的显示 ...
为图片添加半透明遮罩效果
平时为图片添加半透明遮罩效果,我的做法如下: 利用标签i实现背景半透明遮罩.当鼠标hover时, 提高i的背景色透明度值background-color: rgba(0, 0, 0, .6) < ...
jquery 半透明遮罩效果小结
最近偏离学术的道路越来越远了!! 今天要小结的是实现一个半透明遮罩效果.点击页面上的一个按钮,立即在屏幕的正中央显示某个部件,并且在这个部件之外的区域像是蒙上了一层半透明的遮罩.点击遮罩区域,该正中央 ...
android 背景磨砂效果,跨浏览器磨砂效果背景图片模糊特效
background-blur是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效jQuery插件.它会抽取图片的主要色彩,并通过SVG过滤器来制作模糊效果.并且它还通过velocity.js来提供额外的 ...
CSS磨砂玻璃穿透效果 filter: blur(4px)；
文章目录一.参考二.问题描述三.原理说明四.项目代码说明一.参考纯CSS教你实现磨砂玻璃背景效果(附代码) 二.问题描述工作中,UCD 设计了一个"磨砂穿透"的效果, ...
【Wails】高大上的半透明“冰霜” 效果
Wails使用半透明"冰霜"效果首先初始化一个模板项目 wails init -n transparent -t vue 然后把项目跑起来修改应用配置 main.go 将背景色 ...
html css鼠标手型效果
html css鼠标手型效果 style="cursor:pointer" 转载于:https://blog.51cto.com/chengang/1288597

CSS半透明磨砂效果实现

CSS半透明磨砂效果实现相关推荐

最新文章

热门文章