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>
So mask has the filters applied. Also, note the use of url() for a filter with an <svg>
tag for the value — that idea came from http://codepen.io/AmeliaBR/pen/xGuBr. If you happen to minify your CSS, you might need to replace any spaces in the SVG filter markup with “%20”.
So now, everything inside the mask div is blurred.