苹果的覆盖层似乎不仅仅是一种透明度.关于如何使用CSS和JS实现这种效果,你有什么 idea 吗?

不仅仅是透明

推荐答案

使用CSS3是可能的:

#myDiv {
    -webkit-filter: blur(20px);
    -moz-filter: blur(20px);
    -o-filter: blur(20px);
    -ms-filter: blur(20px);
    filter: blur(20px);
    opacity: 0.4;
}

Example here => jsfiddle

Css相关问答推荐

如果父元素跨越所有网格列,子元素是否可以与网格一起工作?

如何引用 SCSS 中的现有类?

包含 N 个 React 组件的砌体网格

为什么 width: 100% 在 Flex 父级中缩小这个 div ?

禁用MUI DataGrid上的悬停效果

如何有条件地设置元素的字体大小,只有在未明确设置父字体大小(即字体大小为继承)的情况下?

当您到达页面底部时,如何使页脚 div 将附加的 div 向上推

如何为 React Native switch 组件创建标签?

CSS 字符串变量的正确null值是多少?

antd 中的子菜单项不可滚动

CSS和 Select 器 - 我可以 Select 具有多个类的元素吗?

如何在 Chrome 中模拟偏好 colored颜色 方案媒体查询?

如何使内容出现在固定的 DIV 元素下方?

CSS:在图像周围创建白光

CSS 表格 td 宽度 - 固定,不灵活

表格溢出时水平滚动

Sass 无效的 CSS 错误:预期的表达式

如何知道哪个 HTML 元素导致了垂直滚动条

CSS3可以转换字体大小吗?

可见性:隐藏 vs 显示:无 vs 不透明度:0