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

Question

提问by Chad Johnson

I am having trouble applying a blur effect on a semi-transparent overlay div. I'd like everything behind the div the be blurred, like this:

我在半透明叠加 div 上应用模糊效果时遇到问题。我希望 div 后面的所有内容都变得模糊，如下所示：

Here is a jsfiddle which doesn't work: http://jsfiddle.net/u2y2091z/

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

Any ideas how to make this work? I'd like to keep this as uncomplicated as possible and have it be cross-browser. Here is the CSS I'm using:

任何想法如何使这项工作？我想让它尽可能简单，并让它跨浏览器。这是我正在使用的 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

采纳答案by Chad Johnson

I was able to piece together information from everyone here and further Googling, and I came up with the following which works in Chrome and Firefox: http://jsfiddle.net/xtbmpcsu/. I'm still working on making this work for IE and Opera.

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

The key is putting the content insideof the div to which the filter is applied:

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

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

And then the CSS:

然后是 CSS：

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;
}

So mask has the filters applied. Also, note the use of url() for a filter with an <svg>tag for the value -- that idea came from http://codepen.io/AmeliaBR/pen/xGuBr. If you happen to minify your CSS, you might need to replace any spaces in the SVG filter markup with "%20".

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

So now, everything inside the mask div is blurred.

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

Answer 2

回答by Weafs.py

Here is an example that uses svgfilter.

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

The idea is to use an svgelement with heightsame as the #overlayand apply the feGaussianblurfilter on it. This filter is applied on an svgimageelement. To give it an extruded effect, you could use a box-shadowat the bottom of the overlay.

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

Browser Support for svgfilters.

浏览器支持svg过滤器。

`Demo on 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

回答by Jon Catmull

For a more simple and up to date answer:

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

backdrop-filter: blur(6px);

Note browser supportis not perfect but in most cases a blur would be non essential.

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

Answer 4

回答by Sampson

If you're looking for a reliable cross-browser approach today, you won't find a great one. The best option you have is to create two images (this could be automated in some environments), and arrange them such that one overlays the other. I've created a simple example below:

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

<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 );
}

Though effective, even this approach isn't necessarily ideal. That being said, it does yield the desired result.

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

enter image description here

在此处输入图片说明

Answer 5

回答by Juho Veps?l?inen

Here's a possible solution.

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

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;
}

I know the CSS can be simplified and you probably should get rid of the ids. The idea here is to use a div as a cropping container and then apply blur on duplicate of the image. Fiddle

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

To make this work in Firefox, you would have to use SVG hack.

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

Answer 6

回答by prajeesh loremine

#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 7

回答by Allen Wong

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

Instead of adding another blur background to your content, you can use backdrop-filter. FYI IE 11 and Firefox may not support it. Check caniuse.

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

Demo:

演示：

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 8

回答by CptGeo

I came up with this solution.

我想出了这个解决方案。

Click to view image of blurry effect

点击查看模糊效果图

It is kind of a trick which uses an absolutely positioned child div, sets its background image same as the parent divand then uses the background-attachment:fixedCSS property together with the same backgroundproperties set on the parent element.

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

Then you apply filter:blur(10px)(or any value) on the child div.

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

*{
    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>
</html>

view on codepen

在代码笔上查看

Answer 9

回答by Amin

Here's a solution that works with fixed backgrounds, if you have a fixed background and you have some overlayed elements and you need blured backgrounds for them, this solution works:

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

Image we have this simple HTML:

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

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

A fixed background for <body>or the wrapper element:

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

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

And here for example we have a overlayed element with a white transparent background:

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

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

Now we need to use the exact same background image of our wrapper for our overlay elements too, i use it as a :beforepsuedo-class:

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

.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;
}

Since the fixed background works in a same way in both wrapper and overlayed elements, we have the background in exactly same scroll position of the overlayed element and we can simply blur it. Here's a working fiddle, tested in Firefox, Chrome, Opera and Edge: https://jsfiddle.net/0vL2rc4d/

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

NOTE:In firefox there's a bugthat makes screen flicker when scrolling and there are fixed blurred backgrounds. if there's any fix, let me know

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

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

提问by Chad Johnson

采纳答案by Chad Johnson

回答by Weafs.py

`Demo on Codepen`

`Demo on Codepen`

回答by Jon Catmull

回答by Sampson

回答by Juho Veps?l?inen

回答by prajeesh loremine

回答by Allen Wong

回答by CptGeo

回答by Amin

相关推荐

最近更新

标签

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

提问by Chad Johnson

采纳答案by Chad Johnson

回答by Weafs.py

Demo on Codepen

Demo on Codepen

回答by Jon Catmull

回答by Sampson

回答by Juho Veps?l?inen

回答by prajeesh loremine

回答by Allen Wong

回答by CptGeo

回答by Amin

相关推荐

Html 如何使用extJS发布json数据

Html 试图从 textarea 中删除可调整大小

Html 使 Bootstrap 容器达到全高

Html 如何并排渲染 <li>？

相关推荐

最近更新

标签

`Demo on Codepen`

`Demo on Codepen`