一、结论:通过 css 的 backdrop-filter 属性设置滤镜函数 blur
一般会是有 背景色、透明度
的容器,如:文章来源:https://www.toymoban.com/news/detail-595819.html
/* 宽高等其他设置这里省略没写 */
background:rgba(3, 87, 255, 0.3);
backdrop-filter: blur(10px);
文章来源地址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模板网!