How to fix blurry egdes on blurred background in css - css

Question

I would like to have a blurred background, while the edges of this Background shall not be blurred. I want the blurred image to entirly fill the background of its paaernt container.
My current solution is:
HTML
<div class="wrapper">
<div class="background"></div>
<div class="text">Lorem Ipsum dolor sit</div>
</div>
CSS
.wrapper {
display: block;
position: relative;
width: 240px;
height: 300px;
overflow: hidden;
border: 1px solid blue;
}
.wrapper .background {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://photo.elsoar.com/wp-content/images/Strawberry-afbeelding.jpg');
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.wrapper .text {
position: absolute;
display: block;
top: 40%;
left: 0;
width: 100%;
height: 60%;
background: rgba(0,130,120,0.5);
color: white;
padding: 10px;
font-size: 2rem;
}
How can I get "no blurry edges", but a blurred image fillingth entire "blue" box?
Thanks a lot.
Working sample:
http://codepen.io/anon/pen/alnDr

Answer 1

The only solution I can think of is using clip property, however it's very tricky, it requires the element to have absolute position. In this case the width clipped should be less than the width of the element, if it's equal to the element's width, it can't clip the blur (strange enough). So we have to set it about 1px less than the element's width, however the border will be broken, so we have to use box-shadow to mimic the border. You can also wrap some element around and set the border for the outer element instead:
.wrapper {
display: block;
position: absolute;
width: 240px;
height: 300px;
overflow: hidden;
box-sizing:border-box;
clip:rect(0,239px,300px,0);
box-shadow:0 0 0 1px blue inset,
-2px 0 0 0 blue inset;
}
Updated Demo.
Another solution can also be used if the background around your div is a solid color, in such a case you can use box-shadow to cover the outer blur like this:
.wrapper {
display: block;
width: 240px;
height: 300px;
overflow: hidden;
position:relative;
border:1px solid blue;
box-shadow:0 0 0px 10px white; /* the surrounding color is white */
}
Note that the inner blurry image should be set with z-index:-1 so that it comes behind the box-shadow, otherwise the box-shadow can't cover the outer blur.
Demo 2