All geek questions in one place

Blur content behind div using CSS3

I ran into the problem of applying blur on the background of absolute / fixed elements, because it does not seem to blur the main content of the page, but only the contents of the absolute element itself. I currently have a style for my warning:

.alert-wrap { position: fixed; z-index: 10; right: 0; bottom: 0; } .alert-wrap .alert { display: block; background-color: rgba(215, 44, 44, 0.5); margin: 0 15px 15px 0; position: relative; } .alert-wrap .alert:before { content: ""; position: absolute; height: 100%; width: 100%; top: 0; bottom: 0; left: 0; right: 0; -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); }

I want this to blur the background of the warning element, making the main content behind it look blurry (with more focus on the element itself), but I could not find anything, even confirming that this problem exists at all.

The HTML text stream is as follows:

 <html> <head> <!-- Header Stuff Deleted --> </head> <body> <div class='alert-wrap'> <div class='alert'> <div class='head'> Notifications </div> <div class='body'> Alert content here </div> </div> </div> <?php //constructing navbar ?> <div class='content'> Some content here </div> <?php //constructing footer ?> </body> </html>

Image example:

example

+5
source share
2 answers

I updated this for your comment on erosion of content ... it handles better like this .

This blurs the background and all content, but not a warning.

enter image description here

HTML:

 <div id="alert"> Lorum Ipsum Delorum Alert! </div> <div class="content" id="example"> Blah Blah Blah Blah Blah Blah Blah Blah Blah <div onclick="document.getElementById('example').className='alerting';document.getElementById('alert').style.display='block';">Go</div> </div>

CSS

 .content { } .alerting { -webkit-filter: blur(10px); -moz-filter: blur(10px); -o-filter: blur(10px); -ms-filter: blur(10px); filter: blur(10px); } #alert { display: none; width: 300px; height: 100px; position: fixed; top: 100px; left: 0; text-align: center; width: 100%; }
+4
source

This sounds like a duplicate of this question . The CSS blur filter is applied to the element itself; however, the background-filter was recently introduced in webkit at night . For a backup that works in current browsers - albeit using canvas - check this answer.

0
source

Source: https://habr.com/ru/post/1234220/

More articles:


All Articles