CSS3 / HTML 5 / PNG blur content behind element
It's 2015 now, and Apple announced Safari 9, which supports a new CSS feature, the backdrop-filter
. Using this CSS rule on your div
applies filters to elements behind it only:
#myDiv {
backdrop-filter: blur(10px);
}
This feature is currently only available in Safari anyway (and the -webkit
prefix is required for it to work), so I don't recommend using it for now. If you do so, be sure to make use of @supports
or/and JS to implement fallback for browsers that don't support it yet:
@supports (backdrop-filter: blur(10px)) {
#myDiv { background: #181818; }
}
Here's the compatibility table at caniuse.com, as well as the Chromium and Firefox feature requests.
Learn more about what's new in Safari.
How to blur(css) div without blur child element
How to disable blur on child element?
.enableBlur>* { filter: blur(1.2px);}
.disableBlur { filter: blur(0);}
<div class="enableBlur"> <hr> qqqqq<br> <span>qqqqq</span><br> <hr class="disableBlur"> <div>aaaaa</div> <div>bbbbb</div> <div class="disableBlur">DDDDD</div> <hr> <img src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"> <img class="disableBlur" src="https://lh5.googleusercontent.com/-n8FG4f09-ug/AAAAAAAAAAI/AAAAAAAACmA/ldtxmWX1SyY/photo.jpg?sz=48"></div>
How can I make a CSS glass/blur effect work for an overlay?
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.
The key is putting the content inside of the div to which the filter is applied:
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;
}
<div id="mask">
<p>Lorem ipsum ...</p>
<img src="http://www.byui.edu/images/agriculture-life-sciences/flower.jpg" />
</div>
remove blur effect on child element
Create a div inside content & give bg image & blur effect to it. & give it z-index less the the opacity div, something like this.
<div class="content">
<div class="overlay"></div>
<div class="opacity">
<div class="image">
<img src="images/zwemmen.png" alt="Sample Image" />
</div>
<div class="info">
a div wih all sort of information
</div>
</div>
</div>
Use Css
.content{
float: left;
width: 100%;
}
.content .overlay{
background-image: url('images/zwemmen.png');
height: 501px;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
z-index:0;
}
.opacity{
background-color: rgba(5,98,127,0.9);
height:100%;
overflow:hidden;
position:relative;
z-index:10;
}
How to apply a CSS filter to a background image
Check out this pen.
You will have to use two different containers, one for the background image and the other for your content.
In the example, I have created two containers, .background-image
and .content
.
Both of them are placed with position: fixed
and left: 0; right: 0;
. The difference in displaying them comes from the z-index
values which have been set differently for the elements.
.background-image {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('https://i.imgur.com/lL6tQfy.png');
width: 1200px;
height: 800px;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.content {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
margin-left: 20px;
margin-right: 20px;
}
<div class="background-image"></div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
<p>Fusce ut placerat eros. Aliquam consequat in augue sed convallis. Donec orci urna, tincidunt vel dui at, elementum semper dolor. Donec tincidunt risus sed magna dictum, quis luctus metus volutpat. Donec accumsan et nunc vulputate accumsan. Vestibulum
tempor, erat in mattis fringilla, elit urna ornare nunc, vel pretium elit sem quis orci. Vivamus condimentum dictum tempor. Nam at est ante. Sed lobortis et lorem in sagittis. In suscipit in est et vehicula.</p>
</div>
Blur Behind Div CSS
backdrop-filter: blur(10px);
It will blur area behind the element.
Mask that blurs content behind it
Nowadays you can use the backdrop-filter
CSS Property.
CSS:
.modal {
backdrop-filter: blur(10px);
}
Related Topics
Change Navbar Color in Twitter Bootstrap 2.0.4
Static Webpage on Nginx Docker Container Missing CSS
The Name 'Media' Does Not Exist in The Current Context
Display Optgroup Label as Initial Option
CSS Text Replace with Image, Need Hyperlink
Ie (11) Improper Handling of CSS Multi-Columns
Copy Chrome Default Input's Outline Style
CSS Apply Styling to All Elements Except Those in The Last Row
Div Gets Misplaced on Text Insertion and Text Goes Out of Div
Supporting Multiple Resolution and Density of Images in Phonegap
How to Style The Drop-Down Suggestions When Using HTML5 <Datalist>
How to Fix The Height of a <Div> Element
CSS Specificity - External Style Sheet Vs Internal Style Sheet Using Just Classes
Twitter Bootstrap Modal Width Issues
What Does The * CSS Operator Do? Are There Any Other CSS Operators