Greetings.

How to make filter: blur (5px); only blur the background of the block that I need?

I searched in the answers and found an example: http://jsfiddle.net/juanojeda/T5j6H/1/

<p>Something to test that the content is in front of the background.</p> body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; } body:before { content: ""; position: absolute; height: 20%; width: 20%; background: url(http://lorempixel.com/420/255); background-size: cover; z-index: -1; /* Keep the background behind the content */ /* don't forget to use the prefixes you need */ -webkit-transform: scale(5); -webkit-transform-origin: top left; -webkit-filter: blur(2px); }

It works, everything is super, but I need the code to work not for the body but for any block and so that there are no indents inside the block that will be blurred.

Help me please. =)

  • what is the difficulty codepen.io/Geyan/pen/XNmbZd?editors=110 - user33274
  • Super. Thank. But it is necessary that the text be still on top of the blur text, which will not be blurred. - gmastrbit
  • check the link again and my answer is given at the bottom - user33274

1 answer 1

Here is the solution to your question! If the blur blurs the text, we create two blocks and position the block with the text absolutely !

 * { margin: 0; padding: 0; } .a-wrapper, .c-wrapper { display: inline-block; position: relative; } .a-wrapper .a, .c-wrapper .c { width: 200px; height: 200px; background: url(http://mywishlist.ru/pic/i/wish/300x300/005/755/296.jpeg); background-size: cover; filter: blur(5px); -webkit-filter: blur(2px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); position: relative; } .b, .d { display: inline-block; width: 20%; height: 200px; background: url(http://mywishlist.ru/pic/i/wish/300x300/005/755/296.jpeg); background-size: cover; } .text { position: absolute; top: 0; left: 0; width: 200px; height: 200px; color: #fefefe; line-height: 200px; text-align: center; } 
 <div class="a-wrapper"> <div class="a"></div> <div class="text">некоторый текст</div> </div> <div class="b"></div> <div class="c-wrapper"> <div class="c"></div> <div class="text">некоторый текст</div> </div> <div class="d"></div>

  • Exactly what is needed. Super. Thank! - gmastrbit