By Govind KamalaPrakash Malviya


2011-04-14 10:56:44 8 Comments

I want to set Opacity of div's background without affecting contained element in IE 8. have a any solution and don't answer to set 1 X 1 .png image and set opacity of that image because I am using dynamic opacity and color admin can change that

I used that but not working in IE 8

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

and

rgba(0,0,0,0.3)

also.

7 comments

@Armin Farah Al-Saada 2017-08-03 09:13:15

It affects the whole child divs when you use the opacity feature with positions other than absolute. So another way to achieve it not to put divs inside each other and then use the position absolute for the divs. Dont use any background color for the upper div.

@Daniel 2017-07-11 08:21:53

What about this approach:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

@Miguel Angel de la Marta 2015-04-30 09:22:18

Maybe there's a more simple answer, try to add any background color you like to the code, like background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

@Germa Vinsmoke 2018-03-12 09:28:45

It is effecting the content too!

@Robert Koritnik 2011-04-14 11:02:43

opacity on parent element sets it for the whole sub DOM tree

You can't really set opacity for certain element that wouldn't cascade to descendants as well. That's not how CSS opacity works I'm afraid.

What you can do is to have two sibling elements in one container and set transparent one's positioning:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

then you have to set transparent position: absolute/relative so its content sibling will be rendered over it.

rgba can do background transparency of coloured backgrounds

rgba colour setting on element's background-color will of course work, but it will limit you to only use colour as background. No images I'm afraid. You can of course use CSS3 gradients though if you provide gradient stop colours in rgba. That works as well.

But be advised that rgba may not be supported by your required browsers.

Alert-free modal dialog functionality

But if you're after some kind of masking the whole page, this is usually done by adding a separate div with this set of styles:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

Then when you display the content it should have a higher z-index. But these two elements are not related in terms of siblings or anything. They're just displayed as they should be. One over the other.

@Botea Florin 2019-08-27 03:26:49

this is the correct answer, working even with bg-images

@Spudley 2011-04-14 11:41:31

The opacity style affects the whole element and everything within it. The correct answer to this is to use an rgba background colour instead.

The CSS is fairly simple:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

...where the first three numbers are the red, green and blue values for your background colour, and the fourth is the 'alpha' channel value, which works the same way as the opacity value.

See this page for more info: http://css-tricks.com/rgba-browser-support/

The down-side, is that this doesn't work in IE8 or lower. The page I linked above also lists a few other browsers it doesn't work in, but they're all very old by now; all browsers in current use except IE6/7/8 will work with rgba colours.

The good news is that you can force IE to work with this as well, using a hack called CSS3Pie. CSS3Pie adds a number of modern CSS3 features to older versions of IE, including rgba background colours.

To use CSS3Pie for backgrounds, you need to add a specific -pie-background declaration to your CSS, as well as the PIE behavior style, so your stylesheet would end up looking like this:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

Hope that helps.

[EDIT]

For what it's worth, as others have mentioned, you can use IE's filter style, with the gradient keyword. The CSS3Pie solution does actually use this same technique behind the scenes, but removes the need for you to mess around directly with IE's filters, so your stylesheets are much cleaner. (it also adds a whole bunch of other nice features too, but that's not relevant to this discussion)

@Jordan Starrk 2019-03-14 04:20:49

brilliant! This helped me so much.

@sandeep 2011-04-14 11:02:36

it's simple only you have do is to give

background: rgba(0,0,0,0.3)

& for IE use this filter

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

you can generate your rgba filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

@Robert Koritnik 2011-04-14 11:28:35

What do gradients have to do with opacity? :S

@thirtydot 2011-04-14 11:45:12

@Robert Koritnik: See my version of this answer for a better explanation - stackoverflow.com/questions/5160419/… also here: stackoverflow.com/questions/4788564/…

@sandeep 2011-04-14 11:47:56

@robert, it's a only IE filter which available in web it's gave same effect as rgba gave & i am not a filter expert .

@clairesuzy 2011-04-14 12:13:16

@Robert it just works ;) see this link - @sandeep I fixed the filter code to add the necessary ingredients(transparent background and hasLayout), change the filter order .. feel free to rollback if you don't agree ;)

@sandeep 2011-04-14 12:20:43

@clairesuz, check my link it's also give these properties but when i work i didn't use these extra properties .It's work fine without it also.

@Robert Koritnik 2011-04-14 12:27:35

@clairesuzy: WOW! That's a very clever trick. I'll upvote this answer because it is answers exactly what was being asked. +1 from me then. This answer should be accepted as the correct one.

@clairesuzy 2011-04-14 12:39:07

@sandeep filters won't work without hasLayout, you may have another hasLayout property in your code, width maybe? I'm working one-handed..broke my wrist hence my slow replies, but here's jsfiddle with the relevant IE code in a conditional comment for comparison of the two methods

@maple_shaft 2011-04-14 11:01:49

Try setting the z-index higher on the contained element.

Related Questions

Sponsored Content

16 Answered Questions

14 Answered Questions

[SOLVED] Set opacity of background image without affecting child elements

  • 2011-02-14 21:30:38
  • jmohr
  • 516767 View
  • 207 Score
  • 14 Answer
  • Tags:   css css3 opacity

4 Answered Questions

[SOLVED] How to make a div's background color translucent?

  • 2011-01-18 21:22:06
  • at.
  • 73837 View
  • 31 Score
  • 4 Answer
  • Tags:   css css3 opacity

1 Answered Questions

[SOLVED] PHP generated semi transparent background color using opacity affects text

  • 2014-09-29 12:04:00
  • George Katsanos
  • 409 View
  • 0 Score
  • 1 Answer
  • Tags:   css opacity rgba

1 Answered Questions

[SOLVED] how to set opacity of background image without affecting text

3 Answered Questions

[SOLVED] set opacity of background color of div that works in ie7

  • 2012-10-02 10:16:52
  • Parth
  • 4234 View
  • 2 Score
  • 3 Answer
  • Tags:   html css

Sponsored Content