How to implement the blur effect of a div background element so that it adapts to the background body.

Here is an example. enter image description here

  • one
    where did you take an example? Is it just a photo or a screenshot from some site? If from the site - can you give a link to it?) - Alexey Shimansky
  • @ AlekseyShimansky The picture was taken from the Apple site in the beta section of iOS testing. If the site was ready for them, I would hardly have written here)) - Konstantin

2 answers 2

There is not a supercross browser, but a working thing, css-property filter

 div { background: url(http://lorempixel.com/800/800/people/3/); width: 800px; height: 800px; position: relative; } div> div { position: absolute; width: 200px; height: 200px; overflow: hidden; background: transparent; background: url(http://lorempixel.com/800/800/people/3/) -300px 500px; left: 300px; top: 300px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } 
 <div><div></div></div>

Read more here - https://webref.ru/css/filter. Well, the specifications are http://www.w3schools.com/cssref/css3_pr_filter.asp

    You can also try using blur.js - http://blurjs.com/
    And you can also have such a solution - http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html
    But again, IE9 +