2

How do we add blackish blur effect in css? I have a piece of text in a div and a background image. I want to blur only the text background.

Image enter image description here

I want to add blur effect only behind Mickey and Minnie.
Here is the code : http://jsfiddle.net/s5jyoo73/

Possible Duplicate of : How can I make a CSS glass/blur effect work for an overlay?

Community
  • 1
  • 1
  • But how would you see a black blur on a black background? Or do you want to get rid of the black background color? For example: http://jsfiddle.net/s5jyoo73/1/ – David Thomas Dec 30 '14 at 13:20
  • this might help [SO how to apply blur....](http://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image-that-i-am-setting-with-ba) – Billy Dec 30 '14 at 13:21
  • 1
    Can you also provide an example of the desired output? – SW4 Dec 30 '14 at 13:22
  • I want only the text portion background to be blurred. The portion above must remain intact. That's what I made different containers for. –  Dec 30 '14 at 13:25
  • 1
    Your fiddle doesn't have show an image for me – Ruan Mendes Dec 30 '14 at 13:30
  • related : http://stackoverflow.com/questions/27583937/how-can-i-make-a-css-glass-blur-effect-work-for-an-overlay – web-tiki Dec 30 '14 at 13:41

2 Answers2

2

You can use CSS3 text-shadow.

Apply text-shadow: 0 0 10px #000000; to <h1> and change the backgound color of <header> to see the changes

dennisjsk
  • 401
  • 2
  • 5
-2

Try to add:

h1 {
  font-family: sans-serif;
  -webkit-filter: blur(3px); 
  -moz-filter: blur(3px); 
  -o-filter: blur(3px); 
  -ms-filter: blur(3px); 
   filter: blur(3px);
}
Mardzis
  • 760
  • 1
  • 8
  • 21
  • 1
    Really, why are people so incredibly prefix-horny these days? [Check the browser support](http://caniuse.com/#feat=css-filters), and find that IE and Opera never supported it at all, and FF never had it prefixed. Only `-webkit-filter` makes sense. – Niels Keurentjes Dec 30 '14 at 13:29
  • 1
    Uh, there is **no** such thing as `-o-filter`, `-ms-filter` and `-moz-filter`. Only `-webkit-filter` exists. – Terry Dec 30 '14 at 13:29
  • In IE 9, `-ms-filter` does exist http://msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx – Ruan Mendes Dec 30 '14 at 13:39