使 div 像模糊的镜子一样透明答案

【问题标题】：Make a div transparent like a blurred mirror使 div 像模糊的镜子一样透明
【发布时间】：2013-12-02 05:49:47
【问题描述】：

我想让一个 div 背景透明，所以我使用了这个 css

-webkit-filter: blur(1px);
-moz-filter: blur(1px);
-ms-filter: blur(1px);
-o-filter: blur(1px);
filter: blur(1px);

也看到这个小提琴：http://jsfiddle.net/LUy3W/

我只希望 div 被模糊，但该 div 中的所有内容也被模糊。如何仅使背景 div 模糊并使其内容像普通文本一样可见？

有什么想法吗？请帮忙。

【问题讨论】：

使用 2 个分隔的 div
@Itay 即使我使用了两个 div，问题仍然存在，请看这个小提琴。如果您更新小提琴并给我一个解决方案，我将不胜感激。非常感谢:)

标签： css blur

【解决方案1】：

这可以通过使用backdrop-filter property（以及许多其他filter effects）的单行CSS来完成，但是browser support在撰写本文时非常糟糕，因此请确保提供备用版本对于不支持的浏览器以及-webkit- 前缀的版本。

.wrapper {
  height: 400px;
  width: 400px;
  background-image: url('https://i.imgur.com/iAgdW.jpg');
  background-size: cover;
}

.inner {
  background-color: rgba(255, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  padding: 50px;
}

<div class="wrapper">
  <div class="inner">my text</div>
</div>

在受支持的浏览器中呈现的输出将如下所示：

【讨论】：

截至 2019 年 7 月，我只能找到支持 backdrop-filter 的 Safari 桌面（据称是 Safari iOS）。在 Chrome 和 Opera 中，显然，它们可以在实验标志下激活，这使得它们不切实际。没有与 Firefox 兼容的迹象。
@Ramtin 2020 年 2 月：看起来 Chrome 现在支持此功能，但从 v76 开始没有标志：caniuse.com/#feat=css-backdrop-filter。 Firefox 仍然需要一个标志。
@JerryGoyal 您至少可以在 about:config 中为自己启用它以进行测试，这至少表明它在某天实施的路线图上。

【解决方案2】：

内容不能在模糊的 div 内，所以使用兄弟元素代替：

HTML

<div class="wrapper">
    <div class="content">my text</div>
</div>

CSS

.wrapper {
    height:400px;
    width:400px;
    position: relative;
}
.wrapper::before{
    width:100%;
    height:100%;
    position: absolute;
    background-image:url('https://i.imgur.com/iAgdW.jpg');
    background-size:cover;
    -webkit-filter: blur(4px);
    -moz-filter: blur(4px);
    -ms-filter: blur(4px);
    -o-filter: blur(4px);
    filter: blur(4px);
}
.content{
    position: absolute;
    background-color:red;
}

Demo fiddle

【讨论】：

这对我有帮助。谢谢。
图像不再托管。 404 未找到
Moz 不再需要前缀。

【解决方案3】：

例如。

html

<div class="div-Blur">
    <div class="div-inside-blur">
    </div>
</div>

CSS

.div-Blur {
    -webkit-filter: blur(1px);
    -moz-filter: blur(1px);
    -ms-filter: blur(1px);
    -o-filter: blur(1px);
    filter: blur(1px);
}

编辑：请试试这个

.div-inside-blur { 
    background: blue; 
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px); 
 }

【讨论】：

查看这个示例小提琴jsfiddle.net/LUy3W，我使用了两个单独的 div，但没有用。 div-Blur 里面的所有内容都是模糊的。
@Marinus 内部 div 内的文本仍然是模糊的
@codehorse 您的编辑无效，请查看jsfiddle.net/LUy3W/8