admin管理员组

文章数量:1297042

I am trying to create overlay that would cover whole site page and blur everything that is behind it. I searched for solution, tried multiple versions with CSS3 blur filter, but without success. Main problem is when body tag have background, it is not blurred.

Toy example:

body
{
  background: url(".jpg");
   
}

h1
{
  text-align: center;
}

#overlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(10px);
}
<html>
<head></head>
<body>
  <h1>
     Text
  </h1>
  
  <div id="overlay">
      overlay
  </div>
</body>
</html>

I am trying to create overlay that would cover whole site page and blur everything that is behind it. I searched for solution, tried multiple versions with CSS3 blur filter, but without success. Main problem is when body tag have background, it is not blurred.

Toy example:

body
{
  background: url("https://upload.wikimedia/wikipedia/mons/8/8a/Too-cute-doggone-it-video-playlist.jpg");
   
}

h1
{
  text-align: center;
}

#overlay
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  -webkit-filter: blur(10px);
}
<html>
<head></head>
<body>
  <h1>
     Text
  </h1>
  
  <div id="overlay">
      overlay
  </div>
</body>
</html>

I want to try to blur everything behind overlay div. If I add blur to h1 (or if I wrap it inside other div and add blur on that div) I could reach near solution, but without blur of background.

Is there any solution that could fulfil all requests?

Idea is to create a JavaScript file, that would do this programatically so that I could use on multiple pages.

  • javascript
  • html
  • css
Share asked Jun 6, 2017 at 20:09 BorisBoris 8362 gold badges11 silver badges24 bronze badges 4
  • So do you want the background image to be blurred or not? – Jonas Zell Commented Jun 6, 2017 at 20:12
  • Have a look here: gordonlesti./css-blur-overlay – Gerard Commented Jun 6, 2017 at 20:16
  • stackoverflow./questions/20039765/… – user7637140 Commented Jun 6, 2017 at 20:21
  • Yes, I tried to blur background. Thank you, I will try SVG solution. – Boris Commented Jun 6, 2017 at 21:07
Add a ment  | 

2 Answers 2

Reset to default 5

This could probably be solved more easily now using css property backdrop-filter: blur(5px);

You can use the filter property with blur, although it's not widely supported: http://jsfiddle/GkXdM/1/. It's supported on Chrome, but it es with a big performance penalty when used on the whole page.

body {
    filter: blur(2px);
}

Or you can just use a div that's full screen (like you have) and just adjust the z-index. I wouldn't suggest putting an background on the body though. No reason for that.

本文标签： javascriptCSS3 blur overlayStack Overflow

版权声明：本文标题：javascript - CSS3 blur overlay - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741644961a2390131.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。