Please tell me how you can use the blur effect. It is necessary to implement so that under the block with the menu content is blurred. The menu has its own background: rgba(32, 32, 32, 0.6) , and all that is under the block is the page content. And it is necessary that the content under the menu block is blurred while still and scrolling through the page. The menu should be fixed at the top of the page.

You need something like this:

enter image description here

  • 2
    I advise you to describe the issue in more detail and give an example of what was done and what did not work out and describe the final result ... - Air
  • How to understand - "eroded when scrolling too"? - Air
  • when we scroll the menu page is fixed, and everything under the menu is blurred - nimble
  • one
    Well, do you understand why I advised you to describe the question in more detail? Any example that will result here will be abstract ..... fixed menu, which layer should be turned off? what about the other components? - Air
  • what's on the gif, the usual background rgba(255,255,255,.75) - HamSter

2 answers 2

Recently I saw the question Qwertiy, which I really liked. And even immediately he mentally found an application for him ... But in practice he didn’t use anywhere. And when I read the final version of this question, the first thought that came is the answer of Sasha Omelchenko to the question Qwertiy. Well, adding all this information, I decided that this is the best solution for this issue.

PS For the best effect, expand to full screen ...

 document.querySelector('main').addEventListener('scroll', function(e) { var dy = this.scrollTop; document.querySelector('#text').style.transform = "translateY(" + -dy + "px)"; }); document.querySelector('#text').addEventListener('wheel', function(e) { document.querySelector('main').scrollTop -= e.wheelDeltaY; e.preventDefault(); }); 
 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background: #272727; color: white; background: url(https://wallbox.ru/wallpapers/main/201447/89de87d17b78c12.jpg); background-attachment: fixed; } #wrapper { overflow-x: hidden; position: relative; width: 100%; height: 100%; } header { overflow: hidden; width: 100%; height: 220px; position: sticky; top: 0; background: transparent; top: 0; } #layerBlurwhite { overflow: hidden; width: 100%; height: 100%; position: sticky; top: 0; background: rgba(255, 255, 255, .5); filter: blur(3px); } #layerBlurBg { overflow: hidden; width: 100%; height: 100%; position: sticky; top: 0; background-image: url(https://wallbox.ru/wallpapers/main/201447/89de87d17b78c12.jpg); background-position: 0 0; filter: blur(10px); } #layerText { z-index: 155; width: 100%; height: 220px; position: fixed; top: 0; background: transparent; color:white; text-align: center; line-height: 2; font-size: 50px; } main { position: relative; overflow-y: scroll; overflow-x: hidden; width: calc(100% + 20px); height: calc(100% - 220px); background: transparent; } main p { margin-top: 150px; } header p { position: relative; top: -220px; margin-top: 150px; color: white; filter: blur(10px); } 
 <div id="wrapper"> <header> <div id="layerBlurBg"></div> <div id="layerBlurwhite"></div> <div id="layerText">MENU BAR</div> <div id="text"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam cumque earum sit aspernatur voluptas magni, neque repellendus obcaecati, cupiditate quae facilis necessitatibus praesentium officiis et rem minus, atque, voluptatem totam voluptate nobis quibusdam asperiores! Ipsa, cupiditate maxime velit rem nulla vel optio, consequuntur enim eos neque doloribus. Doloribus vel odio et adipisci placeat ut, quia temporibus, sit laudantium ipsam consectetur quas culpa sequi libero commodi non, veniam. Maiores fugiat, amet! Sequi optio dolor cupiditate animi, earum necessitatibus quae vel nisi doloremque eos eligendi sunt ipsa, ex atque dolorum sint nulla voluptatibus libero et similique consequatur dolorem iste, distinctio labore!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam mollitia laborum placeat, saepe, voluptates exercitationem consequuntur ea reiciendis esse voluptate sit illo tempore nobis, doloribus sunt nesciunt ipsa fugit. Minus earum, amet fuga exercitationem dolore nobis, possimus adipisci accusantium odit libero facere cumque nostrum dolorum nemo veritatis modi vel pariatur fugiat. Sapiente quos qui reiciendis saepe adipisci sint placeat accusantium. Saepe ipsam aut nostrum, ratione, fugit, culpa iusto, illum atque dicta delectus error explicabo ex? Dolorem saepe veritatis ea delectus quaerat fugit architecto quis error hic vero, laboriosam enim, exercitationem. Obcaecati, illum? Sed minus, deleniti fuga labore, odit totam et.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora libero temporibus impedit veniam. Necessitatibus totam iusto, ducimus voluptas voluptate sed doloribus consequatur quidem nisi veniam tempore aliquid ratione, provident adipisci nobis animi placeat quisquam recusandae. Eaque nihil modi officiis accusamus, repellat libero, expedita adipisci explicabo voluptatum minima, quibusdam quo sequi. Aliquid nobis, eos voluptate repudiandae eius provident officiis enim ad nemo quod beatae ex expedita distinctio quia at, voluptatum iste cum? Sint possimus quam saepe iure perspiciatis consectetur accusantium excepturi asperiores animi, cumque dolores itaque accusamus! Cum quia iste aperiam, minima quas quam ipsam adipisci at sunt rem porro.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab excepturi quis dolores odit mollitia sint perferendis voluptas delectus eaque quas dolorum nesciunt iure repellat cum architecto, in maiores! Consectetur ratione iste nemo eos doloribus soluta ut quas accusantium rerum labore beatae omnis tempora neque, laboriosam ducimus non, itaque expedita eaque quidem. Veniam nemo eligendi, voluptatem quidem accusantium, doloribus sed, explicabo, ex fugiat vel ab exercitationem molestias error repudiandae sunt tempora maiores. Repellendus aut, id corporis nobis rerum eum debitis quod porro reprehenderit illo nulla, in iure. Eius, quidem! Cumque earum ipsam vel sapiente soluta, iste animi, illo aliquam aspernatur est.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptas molestias perspiciatis ex quidem ullam facere esse ab qui voluptatem alias eligendi praesentium, unde, dolores, enim aperiam quam in, eum deleniti vel! Accusamus dolorum, dolore ut sequi sunt quidem earum, quis recusandae sint esse consectetur veritatis distinctio explicabo nemo dignissimos sed? Ut quibusdam sequi, est laudantium inventore, minus facilis sed dignissimos id, eum dolore. Unde voluptas veritatis suscipit quia ab mollitia magni hic nisi vero odio harum quos, molestiae ullam autem rerum earum explicabo temporibus minus quasi numquam dolores provident quibusdam adipisci! Ea quasi doloribus reiciendis ducimus cupiditate alias recusandae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iste voluptates culpa, est velit perspiciatis natus eaque quod quibusdam omnis et impedit voluptatem recusandae officia assumenda, atque quasi fugiat praesentium beatae tempora dolorem, earum nulla dolor. Esse eveniet error aut repudiandae quaerat quis provident inventore aliquam minima harum magni sapiente cum quisquam omnis, quidem molestias possimus dolores numquam tempore officia sed modi. Aliquid quisquam sint aliquam ratione, officiis quibusdam! Esse amet consectetur dolorem, dolor velit alias facere vero eaque non tempora minus illo maxime quis recusandae debitis eos pariatur, voluptas quasi autem ex! Harum architecto repellat dolore libero placeat natus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis quibusdam alias, tempora nam enim, explicabo non molestiae, earum magni rem consectetur totam tenetur ratione necessitatibus iure vitae. Nam tenetur quo sunt voluptates deleniti, et iure quod architecto aspernatur eaque nesciunt at modi ex nostrum possimus impedit maiores quae optio quas dignissimos similique incidunt aliquid eum facere commodi. Officiis perspiciatis aperiam alias numquam voluptatum, vitae aut accusamus ratione, expedita quibusdam odit, ipsa? Eum rerum quasi nobis, recusandae voluptatum accusamus alias, labore non odio quaerat fugiat, fuga nam fugit maxime sed eveniet! Est aliquid, iure tempora repellendus provident autem obcaecati voluptas dolorem!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eos commodi molestias, sed labore impedit quo. Dolorem assumenda dolore, facere, at temporibus eos facilis dolorum quas doloribus nesciunt sequi ut voluptas dolores est. Dolore aliquid quasi inventore quam dolorum maiores, id placeat dolores autem numquam, beatae? Consectetur aspernatur sequi deleniti unde labore iusto earum fuga eius est distinctio tempore cum, quo non veniam, adipisci animi corporis voluptatibus iure delectus velit numquam ea enim repellat debitis. Maiores quas quibusdam id provident a magnam molestias tempore dolores nemo vero in laboriosam assumenda accusantium, quaerat, deserunt ratione numquam molestiae. Sint, placeat consequuntur dolores.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repudiandae doloribus accusamus accusantium, odit mollitia expedita omnis recusandae dolorem quos quidem consequatur, ab iste fugit, eum veritatis ex eaque culpa quis praesentium. Voluptas perferendis cumque, magni at error enim pariatur fuga, reprehenderit quidem odio ex non omnis dolorem ab vero asperiores molestiae ipsum praesentium aliquam. Accusantium ipsam aut autem voluptatum non nostrum tempore illum atque ducimus. Quis sit omnis ea, odio quae eum nostrum fugit dignissimos autem, veniam dicta sed quia minima debitis magnam harum inventore nobis architecto nihil. Recusandae aspernatur unde repudiandae, excepturi laborum, commodi dolorum suscipit tempora. Laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime explicabo magni delectus repudiandae, esse mollitia ullam pariatur, ad quaerat atque asperiores consequatur quos iure facilis sit placeat neque incidunt, ipsam nesciunt voluptas modi debitis! Consequuntur, suscipit libero quisquam illum rem reprehenderit, nisi tenetur. Vero rem sed neque quia soluta, sapiente reprehenderit aspernatur quaerat unde suscipit, cum error voluptatibus laudantium quos hic, modi voluptates praesentium eum repellat impedit recusandae quam alias voluptatum fuga. Ex nisi tempora corrupti, amet ea iusto vero, repellat quidem autem, pariatur similique. Aperiam officia consequatur explicabo illo cupiditate, iusto, voluptates sed dolorum dolorem qui corporis nam eligendi!</p> </div> </header> <main> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo veniam cumque earum sit aspernatur voluptas magni, neque repellendus obcaecati, cupiditate quae facilis necessitatibus praesentium officiis et rem minus, atque, voluptatem totam voluptate nobis quibusdam asperiores! Ipsa, cupiditate maxime velit rem nulla vel optio, consequuntur enim eos neque doloribus. Doloribus vel odio et adipisci placeat ut, quia temporibus, sit laudantium ipsam consectetur quas culpa sequi libero commodi non, veniam. Maiores fugiat, amet! Sequi optio dolor cupiditate animi, earum necessitatibus quae vel nisi doloremque eos eligendi sunt ipsa, ex atque dolorum sint nulla voluptatibus libero et similique consequatur dolorem iste, distinctio labore!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam mollitia laborum placeat, saepe, voluptates exercitationem consequuntur ea reiciendis esse voluptate sit illo tempore nobis, doloribus sunt nesciunt ipsa fugit. Minus earum, amet fuga exercitationem dolore nobis, possimus adipisci accusantium odit libero facere cumque nostrum dolorum nemo veritatis modi vel pariatur fugiat. Sapiente quos qui reiciendis saepe adipisci sint placeat accusantium. Saepe ipsam aut nostrum, ratione, fugit, culpa iusto, illum atque dicta delectus error explicabo ex? Dolorem saepe veritatis ea delectus quaerat fugit architecto quis error hic vero, laboriosam enim, exercitationem. Obcaecati, illum? Sed minus, deleniti fuga labore, odit totam et.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore tempora libero temporibus impedit veniam. Necessitatibus totam iusto, ducimus voluptas voluptate sed doloribus consequatur quidem nisi veniam tempore aliquid ratione, provident adipisci nobis animi placeat quisquam recusandae. Eaque nihil modi officiis accusamus, repellat libero, expedita adipisci explicabo voluptatum minima, quibusdam quo sequi. Aliquid nobis, eos voluptate repudiandae eius provident officiis enim ad nemo quod beatae ex expedita distinctio quia at, voluptatum iste cum? Sint possimus quam saepe iure perspiciatis consectetur accusantium excepturi asperiores animi, cumque dolores itaque accusamus! Cum quia iste aperiam, minima quas quam ipsam adipisci at sunt rem porro.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab excepturi quis dolores odit mollitia sint perferendis voluptas delectus eaque quas dolorum nesciunt iure repellat cum architecto, in maiores! Consectetur ratione iste nemo eos doloribus soluta ut quas accusantium rerum labore beatae omnis tempora neque, laboriosam ducimus non, itaque expedita eaque quidem. Veniam nemo eligendi, voluptatem quidem accusantium, doloribus sed, explicabo, ex fugiat vel ab exercitationem molestias error repudiandae sunt tempora maiores. Repellendus aut, id corporis nobis rerum eum debitis quod porro reprehenderit illo nulla, in iure. Eius, quidem! Cumque earum ipsam vel sapiente soluta, iste animi, illo aliquam aspernatur est.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio voluptas molestias perspiciatis ex quidem ullam facere esse ab qui voluptatem alias eligendi praesentium, unde, dolores, enim aperiam quam in, eum deleniti vel! Accusamus dolorum, dolore ut sequi sunt quidem earum, quis recusandae sint esse consectetur veritatis distinctio explicabo nemo dignissimos sed? Ut quibusdam sequi, est laudantium inventore, minus facilis sed dignissimos id, eum dolore. Unde voluptas veritatis suscipit quia ab mollitia magni hic nisi vero odio harum quos, molestiae ullam autem rerum earum explicabo temporibus minus quasi numquam dolores provident quibusdam adipisci! Ea quasi doloribus reiciendis ducimus cupiditate alias recusandae.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iste voluptates culpa, est velit perspiciatis natus eaque quod quibusdam omnis et impedit voluptatem recusandae officia assumenda, atque quasi fugiat praesentium beatae tempora dolorem, earum nulla dolor. Esse eveniet error aut repudiandae quaerat quis provident inventore aliquam minima harum magni sapiente cum quisquam omnis, quidem molestias possimus dolores numquam tempore officia sed modi. Aliquid quisquam sint aliquam ratione, officiis quibusdam! Esse amet consectetur dolorem, dolor velit alias facere vero eaque non tempora minus illo maxime quis recusandae debitis eos pariatur, voluptas quasi autem ex! Harum architecto repellat dolore libero placeat natus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis quibusdam alias, tempora nam enim, explicabo non molestiae, earum magni rem consectetur totam tenetur ratione necessitatibus iure vitae. Nam tenetur quo sunt voluptates deleniti, et iure quod architecto aspernatur eaque nesciunt at modi ex nostrum possimus impedit maiores quae optio quas dignissimos similique incidunt aliquid eum facere commodi. Officiis perspiciatis aperiam alias numquam voluptatum, vitae aut accusamus ratione, expedita quibusdam odit, ipsa? Eum rerum quasi nobis, recusandae voluptatum accusamus alias, labore non odio quaerat fugiat, fuga nam fugit maxime sed eveniet! Est aliquid, iure tempora repellendus provident autem obcaecati voluptas dolorem!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis eos commodi molestias, sed labore impedit quo. Dolorem assumenda dolore, facere, at temporibus eos facilis dolorum quas doloribus nesciunt sequi ut voluptas dolores est. Dolore aliquid quasi inventore quam dolorum maiores, id placeat dolores autem numquam, beatae? Consectetur aspernatur sequi deleniti unde labore iusto earum fuga eius est distinctio tempore cum, quo non veniam, adipisci animi corporis voluptatibus iure delectus velit numquam ea enim repellat debitis. Maiores quas quibusdam id provident a magnam molestias tempore dolores nemo vero in laboriosam assumenda accusantium, quaerat, deserunt ratione numquam molestiae. Sint, placeat consequuntur dolores.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo repudiandae doloribus accusamus accusantium, odit mollitia expedita omnis recusandae dolorem quos quidem consequatur, ab iste fugit, eum veritatis ex eaque culpa quis praesentium. Voluptas perferendis cumque, magni at error enim pariatur fuga, reprehenderit quidem odio ex non omnis dolorem ab vero asperiores molestiae ipsum praesentium aliquam. Accusantium ipsam aut autem voluptatum non nostrum tempore illum atque ducimus. Quis sit omnis ea, odio quae eum nostrum fugit dignissimos autem, veniam dicta sed quia minima debitis magnam harum inventore nobis architecto nihil. Recusandae aspernatur unde repudiandae, excepturi laborum, commodi dolorum suscipit tempora. Laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime explicabo magni delectus repudiandae, esse mollitia ullam pariatur, ad quaerat atque asperiores consequatur quos iure facilis sit placeat neque incidunt, ipsam nesciunt voluptas modi debitis! Consequuntur, suscipit libero quisquam illum rem reprehenderit, nisi tenetur. Vero rem sed neque quia soluta, sapiente reprehenderit aspernatur quaerat unde suscipit, cum error voluptatibus laudantium quos hic, modi voluptates praesentium eum repellat impedit recusandae quam alias voluptatum fuga. Ex nisi tempora corrupti, amet ea iusto vero, repellat quidem autem, pariatur similique. Aperiam officia consequatur explicabo illo cupiditate, iusto, voluptates sed dolorum dolorem qui corporis nam eligendi!</p> </main> </div>

  • thanks a lot - nimble
  • You ... If something is not clear, ask ... - Air
  • Well, if that necessarily turn) - nimble
  • @Alexandr_T, Thank you !!! - Air

The filter has a blur () parameter.

For example: filter: blur (1px);

  • Yes, but how to make the blur happen in the menu area. Just if I apply a filter to the block, the whole block will be blurred - nimble
  • Make another block in the area where you want to blur and apply blur. Z-index w3schools.com/cssref/pr_pos_z-index.asp - Zann