How can I apply blur to a parent without the children getting blurred? [duplicate]

Instead of using opacity, set a background-color with rgba, where 'a' is the level of transparency.

So instead of:

use

Opacity is not actually inherited in CSS. It's a post-rendering group transform. In other words, if a <div> has opacity set you render the div and all its kids into a temporary buffer, and then composite that whole buffer into the page with the given opacity setting.

What exactly you want to do here depends on the exact rendering you're looking for, which is not clear from the question.

A little trick if your parent is transparent and you would like your child to be the same, but defined exclusively (e.g. to overwrite the user agent styles of a select dropdown):

As others have mentioned in this and other similar threads, the best way to avoid this problem is to use RGBA/HSLA or else use a transparent PNG.

But, if you want a ridiculous solution, similar to the one linked in another answer in this thread (which is also my website), here's a brand new script I wrote that fixes this problem automatically, called thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/

Basically it uses JavaScript to remove all children from the parent div, then reposition the child elements back to where they should be without actually being children of that element anymore.

To me, this should be a last resort, but I thought it would be fun to write something that did this, if anyone wants to do this.

Opacity of child element is inherited from the parent element.

But we can use the css position property to accomplish our achievement.

The text container div can be put outside of the parent div but with absolute positioning projecting the desired effect.

Ideal Requirement------------------>>>>>>>>>>>>

HTML

CSS

Output:--

the Text is not visible because inheriting opacity from parent div.

Solution ------------------->>>>>>

HTML

CSS

Output :

the Text is visible with same color as of background because the div is not in the transparent div

The question didn't defined if the background is a color or an image but since @Blowski have already answered for coloured backgrounds, there's a hack for images below:

This way you can manipulate the color of your opacity and even add nice gradient effects.

I also faced the same issues, after doing some googling I found some solutions ( 3-ways ) of this problem. I am sharing the solutions here, you can try any of these.

Option-1: Use a pseudo markup element before or after as the background

Option-2: Use rgba colors with alpha value instead of opacity.

Option-3: Use background div with absolute position one element over another.

There is no one size fits-all approach, but one thing that I found particularly helpful is setting opacity for a div's direct children, except for the one that you want to keep fully visible. In code:

and css:

In case you have background colors/images on the parent you fix color opacity with rgba and background-image by applying alpha filters

Answers above seems to complicated for me, so I wrote this:

kb-mask-overlay it's your (opacity) parent, pop-up it's your (no opacity) children. Everything below it's rest of your site.

Below worked for me:

From:

To:

To convert the hex & opacity to rgba,
use a website like http://hex2rgba.devoth.com/

It seems that display: block elements do not inherit opacity from display: inline parents.

Codepen example

Maybe because it's invalid markup and the browser is secretly separating them? Because source doesn't show that happening. Am I missing something?

If you have to use an image as the transparent background, you might be able to work around it using a pseudo element:

html

css

My answer is not about static parent-child layout, its about animations.

I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):

And then, in js, you removing .invisible class with timeout function, adding .opacity-zero class, trigger layout with something like whatever.style.top; and removing .opacity-zero class.

Better to check this demo http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011

I solved this problem by first creating and saving a faded image which I then used in the css background. I used the following python code:

Here, im1.jpg was simply a white image of the same dimensions as im2.jpg.

For other people trying to make a table (or something) look focused on one row using opacity. Like @Blowski said use color not opacity. Check out this fiddle: http://jsfiddle.net/2en6o43d/

Assign opacity 1.0 to the child recursively with:

Example: