CSS 中的 OS X Yosemite 菜单背景模糊

Posted 2023-03-06

【中文标题】CSS 中的 OS X Yosemite 菜单背景模糊

【英文标题】：OS X Yosemite menu background blur in CSS

【发布时间】：2014-09-25 05:37:49

【问题描述】：

我正在寻找一种方法来获得在 css 中运行的 OS X 10.10 的模糊背景效果。使用filter:blur 或 SVG 高斯滤镜进行模糊也会使边界模糊，因此这不起作用。

下面是效果示例：

【参考方案1】：

您可以使用 Css3 和 JS，如 article 中所述。您可以在下面找到 Css 代码的 sn-p，有关完整的工作示例，请参阅下面的原始帖子和小提琴：

/* TRANSFORMATIONS */
 .glass.down 
 /* Fallback for browsers that don't support 3D Transforms */
 transform: translateY(100%) translateY(-7rem);
 transform: translateY(100%) translateY(-7rem) translateZ(0);


.glass.down::before 
 transform: translateY(-100%) translateY(7rem);
 transform: translateY(-100%) translateY(7rem) translateZ(0);


.glass.up, .glass.up::before 
 transform: translateY(0);
 transform: translateY(0) translateZ(0);

查看此演示： http://jsfiddle.net/cQQ9u/

【参考方案2】：

这是模仿 OSX Yosemite 的 CSS

样式表

body 
  background-image: url('your image');
  background-size: cover;
  font-size: 14px;


.block 
  color: #000;
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
  background: inherit;
  position: relative;


.block:before 
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    -webkit-filter: blur(10px) saturate(2);


.title 
    font-size: 1.4em;
    font-weight: 300;
    color: #222;
    padding: 8px;
    background: rgba(235,235,235,0.85);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: center;


.content 
    padding: 8px;
    background: rgba(255,255,255,0.66);

你的 html 如下所示

<div class="block">
  <div class="title">Hello World</div>
  <div class="content">This is your main content!</div>
</div>

示例

【讨论】：

这可能是实现这一目标的最干净的方法。请注意，根据块内的内容，您可能需要将 .block:before z-index 调整为较低的值，因为某些浏览器会将其呈现在内容之上。

【参考方案3】：

这些只是解决方法...它仅适用于图像背景，不适用于文本（例如，如果我们要创建模态窗口）...您可以结合 css 和 js 来获得类似的效果，但是现在我们无法使用纯 CSS 获得正确的行为。 这是我的想法，希望一些 CSS 大师可以反驳我，但我认为这是 CSS3 技术的限制......也许将来我们可以做到。

【参考方案4】：

你可以通过 webkit 的 background-filter css 属性来实现这个效果

https://webkit.org/demos/backdrop-filter/