首页 > 其他分享 >css_使用backdrop-filter实现磨玻璃效果

css_使用backdrop-filter实现磨玻璃效果

时间:2023-11-16 17:48:41浏览次数:38  
标签:50% height filter css background position backdrop

  <div id="container">
    <div id="mask"></div>
  </div>
#container {
  width: 500px;
  height: 300px;
  position: relative;
  border: 1px solid #ccc;
  background-image: url('http://thetest.com/vokax3ygwx4vokax3ygwx4.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

#mask {
  width: 300px;
  height: 180px;
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: transparent;
  overflow: hidden;
  transform: translate(-50%, -50%);
  backdrop-filter:  blur(10px) ;
}
  • 实现效果

标签:50%,height,filter,css,background,position,backdrop
From: https://www.cnblogs.com/isAyi/p/17836833.html

相关文章

  • CSS之min-height的使用
    1.关于min-height的使用效果2.不给height会造成的问题期望min-height生效3.直接给height会产生的问题期望被内容撑开的height生效注:no底边距,==>到底边的距离,懒得改了555,强迫症大免疫......
  • 网页调试(css,html,js)获取资源链接等
    进入调试模式F12或者右键检查在元素栏点击相应的组件可以查看html源码,图片视频音频链接等,或者点击组件右键检查还可以查看组件css布局变化html元素源码可以看到class类名,触发事件以及style样式在css上的改变是实时的,刷新页面会失效html的改变需要双击,同样刷新页面......
  • CSS - flex布局
    学习网址:https://zxuqian.cn/css-flex-box-layout/#google_vignette......
  • Tailwind CSS那些事儿
    ❝积土而为山,积水而为海。——《荀子·儒效》❞大家好,我是「柒八九」。前言在回望过去,展望未来-2024React生态一览表中讲到CSS时,我们提到过TailwindCSS,并且也说会有相关的文章。在文章中介绍到,TailwindCSS的受欢迎程度还是很高的。。不能说是遥遥领先,但是也是和另外的css解决......
  • css基础样式
    CSS简介CSS全称层叠样式表(CascadingStyleSheets)CSS也是一种标记语言,用于给HTML结构设置样式,例如文字大小、颜色元素宽高效果等等核心思想:HTML搭建结构,CSS添加样式,实现结构与样式的分离CSS行内样式行内样式又称内联样式直接在标签内通过style属性设置样式......
  • 成品直播源码推荐,原生button按钮css去掉默认样式
    成品直播源码推荐,原生button按钮css去掉默认样式button{border:none;margin:0;padding:0;outline:none;border-radius:0;line-height:normal;}button::after{  border:none;}​以上就是成品直播源码推荐,原生button按钮css去掉默认样式,更多内容欢迎关注之后的文章 ......
  • PostCSS通过px2rem插件和lib-flexible将px单位转换为rem(root em)单位实现大屏适配
    目录文档postcss中使用postcss-plugin-px2rem安装postcss-plugin-px2rem示例默认配置webpack中使用postcss-plugin-px2rem项目结构安装依赖文件内容大屏适配参考文章文档类似的插件postcss-plugin-px2remhttps://www.npmjs.com/package/postcss-plugin-px2remhttps://github.com/......
  • CSS 也能实现 if 判断?实现动态高度下的不同样式展现
    最近在群里,有个小伙伴问了这么一道很有趣的问题:CSS能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容为了简化实际效果,我们看这么一张示意效果图:可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标出现。这个效果在很多场景都会出......
  • 小程序性能提速秘籍:CSS代码优化,让小程序轻松翻倍酷炫!
    引言:Hello,小程序开发小能手们!是不是有时候发现小程序的加载速度有点慢,页面样式显示有点乱?别急,今天小编要传授一招“CSS代码优化”的技能,让你的小程序风驰电掣,页面秒变酷炫!我们要一起玩得开心,不让性能问题影响我们的小程序!......
  • 纯CSS实现魔法渐变边框卡片
    如图所示,这是一个很炫酷的卡片效果,关键效果在于卡片的边框呈渐变色变化着,在网页中有这样一个卡片相信可以极大的增强用户体验交互。本次文章将解读如何使用纯CSS实现这个炫酷的卡片效果。基于上面的动图可以分析出以下是本次实现的主要几点:卡片的边框是渐变色卡片的边框呈顺时......