backdrop-filter

#backdrop-filter

利用backdrop-filter属性，你将可以对，元素背后的区块执行，诸如，模糊、变暗等操作。常应用于制作毛玻璃的效果。

#浏览器支持

#毛玻璃

这里以毛玻璃为例子，

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kfqVUXhD-1576144848851)
HTML:

backdrop-filter: blur(15px)

CSS:

.wrapper{   margin: 0 auto;   width: 350px;   height: 500px;   background-image: url('https://www.ditto.ink/images/bg10.png');   background-position: center center;   background-repeat: no-repeat;   background-size: cover;}.container{   display: flex;   justify-content: center;   align-items: center;}.box{   width: 350px;   height: 50px;   backdrop-filter: blur(15px);   background-color: rgba(255, 255, 255, 0.3);   color: rgba(255,255,255,.5);   text-align: center;}

This is my Blog website

backdrop-filter相关推荐

Backdrop Filter
CSS 滤镜 : backdrop-filter backdrop filter属性允许我们使用css对元素后面的内容应用过滤效果. 滤镜: 名称: 方法案例: 效果: blur() 模糊 : blu ...
深入分析 Flutter 渲染性能
简介: Flutter 有很多优点,特别是对于开发者来说,跨平台多端支持,丰富的 UI 组件库和交互效果,声明式 UI,React 的更新方式,Hot-reload 提高开发效率等等.虽然它在渲染性能 ...
iOS 9，为前端世界都带来了些什么？「译」
2015 年 9 月,Apple 重磅发布了全新的 iPhone 6s/6s Plus.iPad Pro 与全新的操作系统 watchOS 2 与 tvOS 9(是的,这货居然是第 9 版),加上已经 ...
曾经的iOS 9，为前端世界都带来了些什么？
2015 年 9 月,Apple 重磅发布了全新的 iPhone 6s/6s Plus.iPad Pro 与全新的操作系统 watchOS 2 与 tvOS 9(是的,这货居然是第 9 版),加上已经 ...
Python 常用内置函数map、zip、filter、reduce、enumerate
Python 中有许多非常实用的内置函数,通过这些函数我们可以方便的实现某些功能,下面就列举一些常用的内置函数. 1. map() 函数 map() 可以根据提供的函数对指定序列做映射,它接受一个函数 ...
2021年大数据常用语言Scala（二十四）：函数式编程过滤 filter
目录过滤 filter 定义方法签名方法解析案例参考代码过滤 filter 过滤符合一定条件的元素定义方法签名 def filter(p: (A) ⇒ Boolean): Trav ...
[JAVA EE] Filter过滤器
Filter过滤器 ◼ 过滤器(Filter)可以动态地拦截请求和响应. ◼ 应用场景:过滤敏感词汇.防止SQL注入.设置字符编码.进行URL级别的权限访问控制.压缩响应信息等. 启动文件DemoA ...
Python 高阶函数filter、map、reduce、reversed、sorted及迭代器函数 iter
1. filter(function, iterable) 过滤器,过滤掉不满足函数 function 的元素,重新返回一个新的迭代器. 其中 function 函数的第一个参数是可迭代对象 iter ...
java 过滤器Filter
Filter简介 Filter也称之为过滤器,它是Servlet技术中最实用的技术,Web开发人员通过Filter技术,对web服务器管理的所有web资源:例如Jsp, Servlet, 静态图片文件 ...
Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法
当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot load http://xxxxxx. Origin http://xxxxxx ...

backdrop-filter

#backdrop-filter

#浏览器支持

#毛玻璃

This is my Blog website

backdrop-filter相关推荐

最新文章

热门文章