css背景毛玻璃效果

这篇具有很好参考价值的文章主要介绍了css背景毛玻璃效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、结论:通过 css 的 backdrop-filter 属性设置滤镜函数 blur

一般会是有 背景色、透明度 的容器,如:

/* 宽高等其他设置这里省略没写 */
background:rgba(3, 87, 255, 0.3);
backdrop-filter: blur(10px);

css背景毛玻璃效果,CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-595819.html

二、backdrop-filter 的其他用法

  • backdrop-filter CSS 属性可以让你为一个元素后面区域添加图形效果(如模糊或颜色偏移)
  • 因为它适用于 元素背后的所有元素,为了看到效果,必须使元素或其背景 至少部分透明
  • 除了设置blur,还有其他用法
/* 指向 SVG 滤镜的 URL */
backdrop-filter: url(commonfilters.svg#filter);

/* <filter-function> 滤镜函数值 */
backdrop-filter: blur(2px);
backdrop-filter: brightness(60%);
backdrop-filter: contrast(40%);
backdrop-filter: drop-shadow(4px 4px 10px blue);
backdrop-filter: grayscale(30%);
backdrop-filter: hue-rotate(120deg);
backdrop-filter: invert(70%);
backdrop-filter: opacity(20%);
backdrop-filter: sepia(90%);
backdrop-filter: saturate(80%);

/* 多重滤镜 */
backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);

到了这里,关于css背景毛玻璃效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 毛玻璃动画交互效果

    从上述的效果展示页面结构来看,页面布局都是比较简单的,只是元素的动画交互比较麻烦。 第一个动画交互是两个圆相互交错来回运动。第二个动画交互是三角绕着圆进行 360 度旋转。 animation animation-delay 绝对定位布局 第一个动画是两个圆来回交互运动。 第二个动画交互

    2024年02月07日
    浏览(40)
  • Canvas绘制毛玻璃背景分享海报

    最近重新设计了分享海报,用毛玻璃作为背景,使整体更有质感,如果没有用到canvas,毛玻璃效果其实很好实现,给元素添加一个滤镜即可(比如:filter: blur(32px)),但是实践的过程中发现,canvas在IOS端一直没有效果,查了一个文档发现IOS端不支持filter。。。有点想骂人。。

    2024年02月12日
    浏览(38)
  • 毛玻璃态卡片悬停效果

    页面的组成部分主要是卡片。其中卡片的组成部分主要是包括了图片和详情。 卡片的动效是鼠标悬停在卡片上时,图片会移动到左侧,并且图片是毛玻璃效果。所以我们在布局的时候图片会采用绝对布局。而详情则是基础布局。 响应式 绝对布局 filte 属性的 invert 值使用 ba

    2024年02月07日
    浏览(47)
  • react native 毛玻璃效果

    https://docs.expo.dev/versions/latest/sdk/blur-view/ https://github.com/expo/expo/issues/6613     参考链接: https://chat.xutongbao.top/

    2024年02月09日
    浏览(45)
  • OpenCV轻松入门(六)——简单图片处理【马赛克、毛玻璃、浮雕效果】

    马赛克效果 马赛克指现行广为使用的一种图像(视频)处理手段,此手段将影像特定区域的色阶细节劣化并造成色块打乱的效果,因为这种模糊看上去有一个个的小格子组成,便形象的称这种画面为马赛克。其目的通常是使之无法辨认。 下面,我们来介绍一下实现马赛克的思

    2024年04月14日
    浏览(46)
  • 在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

    backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理,模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色(RGB值为0, 0, 0),并且通过/符号后面的透明度值(32%不透明度)使背

    2024年04月09日
    浏览(50)
  • 毛玻璃用户卡交互

    从效果展示可以看到,此效果都是比较常规的。主要的核心就是卡片的悬停效果。 backdrop-filter 回顾 transition transform 完整代码下载

    2024年02月08日
    浏览(46)
  • 3D 毛玻璃晶质见证卡

    从上面的效果展示来看,页面主要成员是一张卡片,并且卡片上有三个小矩形,而小矩形上会展示对应的内容。 当鼠标悬停在卡片上时,卡片会随着鼠标的移动而改变视角。 transform-style 属性的 preserve-3d 值运用 transform 属性的 translateZ 值运用 VanillaTilt.js 与 translateZ 的 3D 视角

    2024年02月06日
    浏览(40)
  • Unity CommandBuffer实现毛玻璃特效

    特效可以用于一般物体,也可以应用于UI。一直想在UI中实现这么个效果,现在终于实现了。 效果如下: 应用于场景中的屏物体 应用于UI 调节Shader的参数,可以调整背景模糊和扭曲的程度,也可以调整毛玻璃的颜色,还可也换法线和纹理贴图。 原理 用到是 CommandBuffer ,其实

    2024年02月16日
    浏览(45)
  • 【积水成渊】CSS磨砂玻璃效果和渐变主题色文字

     大家好,我是csdn的博主:lqj_本人 lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了: https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482 平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西,

    2024年02月13日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包