如何使 CSS 玻璃/模糊效果适用于叠加层？

Question

我无法在半透明覆盖 div 上应用模糊效果。 我希望 div 后面的所有内容都被模糊，如下所示：

这是一个不起作用的jsfiddle： http://jsfiddle.net/u2y2091z/

任何想法如何使这项工作？ 我想让它尽可能简单，并让它成为跨浏览器。 这是我正在使用的 CSS：

#overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    background:black;
    background:rgba(0,0,0,0.8);

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

Answer 1

要获得更简单和最新的答案：

backdrop-filter: blur(6px);

注意浏览器支持并不完美，但在大多数情况下，模糊不是必需的。

Answer 2

这是一个使用svg过滤器的示例。

这个想法是使用height与#overlay相同的svg元素，并在其上应用feGaussianblur过滤器。 此过滤器应用于svg image元素。 为了给它一个挤压效果，你可以在覆盖层的底部使用一个box-shadow 。

浏览器支持svg过滤器。

Codepen 上的演示

 body { background: #222222; } #container { position: relative; width: 450px; margin: 0 auto; } img { height: 300px; } #overlay { position: absolute; left: 0; top: 0; width: 100%; z-index: 1; color: rgba(130, 130, 130, 0.5); font-size: 50px; text-align: center; line-height: 100px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); }

 <div id="container"> <img src="http://lorempixel.com/450/300/sports" /> <div id="overlay">WET</div> <svg width="450" height="100" viewBox="0 0 450 100" style="position: absolute; top: 0;"> <defs> <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="3" /> </filter> </defs> <image filter="url(#blur)" xlink:href="http://lorempixel.com/450/300/sports" x="0" y="0" height="300px" width="450px" /> </svg> </div>

Answer 3

我能够将这里每个人的信息拼凑在一起，并进一步谷歌搜索，我想出了以下适用于 Chrome 和 Firefox 的方法： http : //jsfiddle.net/xtbmpcsu/ 。 我仍在努力使这项工作适用于 IE 和 Opera。

关键是将内容放在应用过滤器的 div 中：

 body { background: #300000; background: linear-gradient(45deg, #300000, #000000, #300000, #000000); color: white; } #mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.5; } img { filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); position: absolute; left: 100px; top: 100px; height: 300px; width: auto; }

 <div id="mask"> <p>Lorem ipsum ...</p> <img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" /> </div>

所以 mask 应用了过滤器。 另外，请注意 url() 用于带有<svg>标签的过滤器的值——这个想法来自http://codepen.io/AmeliaBR/pen/xGuBr 。 如果您碰巧缩小了 CSS，则可能需要将 SVG 过滤器标记中的任何空格替换为“%20”。

所以现在，掩码 div 中的所有内容都变得模糊了。

Answer 4

background: rgba(255,255,255,0.5);
backdrop-filter: blur(5px);

您可以使用 background -filter ，而不是为您的内容添加另一个模糊背景。 仅供参考 IE 11 和 Firefox 可能不支持它。 检查caniuse 。

演示：

 header { position: fixed; width: 100%; padding: 10px; background: rgba(255,255,255,0.5); backdrop-filter: blur(5px); } body { margin: 0; }

 <header> Header </header> <div> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> <img src="https://dummyimage.com/600x400/000/fff" /> </div>

Answer 5

如果您今天正在寻找一种可靠的跨浏览器方法，那么您将找不到合适的方法。 您拥有的最佳选择是创建两个图像（这在某些环境中可以自动化），并将它们排列成一个覆盖另一个。 我在下面创建了一个简单的例子：

<figure class="js">
    <img src="http://i.imgur.com/3oenmve.png" />
    <img src="http://i.imgur.com/3oenmve.png?1" class="blur" />
</figure>

figure.js {
    position: relative;
    width: 250px; height: 250px;
}

figure.js .blur {
    top: 0; left: 0;
    position: absolute;
    clip: rect( 0, 250px, 125px, 0 );
}

尽管有效，但即使是这种方法也不一定是理想的。 话虽如此，它确实产生了预期的结果。

Answer 6

这是一个可能的解决方案。

HTML

<img id="source" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />

<div id="crop">
    <img id="overlay" src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>

CSS

#crop {
    overflow: hidden;

    position: absolute;
    left: 100px;
    top: 100px;

    width: 450px;
    height: 150px;
}

#overlay {
    -webkit-filter:blur(4px);
    filter:blur(4px);

    width: 450px;
}

#source {
    height: 300px;
    width: auto;
    position: absolute;
    left: 100px;
    top: 100px;
}

我知道 CSS 可以简化，您可能应该摆脱 id。 这里的想法是使用 div 作为裁剪容器，然后在图像的副本上应用模糊。 小提琴

要在 Firefox 中进行这项工作，您必须使用SVG hack 。

Answer 7

 #bg, #search-bg { background-image: url('https://images.pexels.com/photos/719609/pexels-photo-719609.jpeg?w=940&h=650&auto=compress&cs=tinysrgb'); background-repeat: no-repeat; background-size: 1080px auto; } #bg { background-position: center top; padding: 70px 90px 120px 90px; } #search-container { position: relative; } #search-bg { /* Absolutely position it, but stretch it to all four corners, then put it just behind #search's z-index */ position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 99; /* Pull the background 70px higher to the same place as #bg's */ background-position: center -70px; -webkit-filter: blur(10px); filter: url('/media/blur.svg#blur'); filter: blur(10px); } #search { /* Put this on top of the blurred layer */ position: relative; z-index: 100; padding: 20px; background: rgb(34,34,34); /* for IE */ background: rgba(34,34,34,0.75); } @media (max-width: 600px ) { #bg { padding: 10px; } #search-bg { background-position: center -10px; } } #search h2, #search h5, #search h5 a { text-align: center; color: #fefefe; font-weight: normal; } #search h2 { margin-bottom: 50px } #search h5 { margin-top: 70px }

 <div id="bg"> <div id="search-container"> <div id="search-bg"></div> <div id="search"> <h2>Awesome</h2> <h5><a href="#">How it works »</a></h5> </div> </div> </div>

Answer 8

这将对内容进行模糊覆盖：

.blur {
  display: block;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  background-color: rgba(0, 0, 0, 0.5);
}

Answer 9

从backdrop-filter

...将图形效果（例如模糊或颜色偏移）应用于元素后面的区域。 因为它适用于元素后面的所有内容，要查看效果，您必须使元素或其背景至少部分透明。

Answer 10

我想出了这个解决方案。

点击查看模糊效果图片

这是一种技巧，它使用绝对定位的子div ，将其背景图像设置为与父div相同，然后使用background-attachment:fixed CSS 属性以及在父元素上设置的相同background属性。

然后在子 div 上应用filter:blur(10px) （或任何值）。

 *{ margin:0; padding:0; box-sizing: border-box; } .background{ position: relative; width:100%; height:100vh; background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); background-size:cover; background-position: center; background-repeat:no-repeat; } .blur{ position: absolute; top:0; left:0; width:50%; height:100%; background-image:url('https://images.unsplash.com/photo-1547937414-009abc449011?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80'); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size:cover; filter:blur(10px); transition:filter .5s ease; backface-visibility: hidden; } .background:hover .blur{ filter:blur(0); } .text{ display: inline-block; font-family: sans-serif; color:white; font-weight: 600; text-align: center; position: relative; left:25%; top:50%; transform:translate(-50%,-50%); }

 <head> <title>Blurry Effect</title> </head> <body> <div class="background"> <div class="blur"></div> <h1 class="text">This is the <br>blurry side</h1> </div> </body>

在代码笔上查看

Answer 11

这是一个适用于固定背景的解决方案，如果您有一个固定的背景并且您有一些叠加的元素并且您需要为它们设置模糊背景，则此解决方案有效：

图像我们有这个简单的 HTML：

<body> <!-- or any wrapper -->
   <div class="content">Some Texts</div>
</body>

<body>或包装元素的固定背景：

body {
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

在这里，例如我们有一个带有白色透明背景的叠加元素：

.content {
  background-color: rgba(255, 255, 255, 0.3);
  position: relative;
}

现在我们也需要为覆盖元素使用与包装器完全相同的背景图像，我将它用作:before psuedo-class：

.content:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  filter: blur(5px);
  background-image: url(http://placeimg.com/640/360/any);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

由于固定背景在包装元素和覆盖元素中的工作方式相同，因此我们将背景放置在与覆盖元素完全相同的滚动位置，我们可以简单地对其进行模糊处理。 这是一个工作小提琴，在 Firefox、Chrome、Opera 和 Edge 中测试过： https : //jsfiddle.net/0vL2rc4d/

注意：在 firefox 中有一个错误，它会在滚动时使屏幕闪烁，并且有固定的模糊背景。 如果有任何修复，请告诉我