Opacity of div's background without affecting contained element in IE 8?
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)
How to apply an opacity without affecting a child element with html/css?
As far as I know you can't do it in a simple way. There a couple of options here:
Use absolute positioning to position box "inside" the container.
#container {
opacity: 0.3;
background-color: #777788;
position: absolute;
top: 100px;
left: 100px;
height: 150px;
width: 300px;
}
#box {
opacity: 1;
background-color: #ffffff;
position: absolute;
top: 110px;
left: 110px;
height: 130px;
width: 270px;
}<div id="container"></div>
<div id="box">
<p>Something in here</p>
</div>setting opacity on a div, without effecting other divs
You could always use an RGBA value:
html {
background-color: red;
}
#login {
width: 365px;
background-color: rgba(255, 255, 255, 0.3);
padding: 37px;
}https://jsfiddle.net/d2shse4c/2/
CSS background opacity with rgba not working in IE 8
Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.
EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
set opacity of background color of div that works in ie7
Use a transparent image for the background for IE. It's annoying but it's the best way of doing what you want without getting stuck with opacity on the text. Or just go mental with the filters...
.opacityTest{
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}Opacity CSS not working in IE8
No idea if this still applies to 8, but historically IE doesn't apply several styles to elements that don't "have layout."
see: http://www.satzansatz.de/cssd/onhavinglayout.html
Related Topics
How to Change the Height of an Image in CSS :Before/:After Pseudo-Elements
How to Set Border'S Thickness in Percentages
What Do "Flex" and "Justify-Content" Achieve That "Text-Align" Doesn'T
Applying CSS Styles Only to Certain Elements
Css Page-Break Not Working in All Browsers
What's the Difference Between CSS Classes .Foo.Bar (Without Space) and .Foo .Bar (With Space)
Triangle Shape With Background Image
Top Nav Bar Blocking Top Content of the Page
Universal Selector * and Pseudo Elements
Calc of Max, or Max of Calc in CSS
How to Only Show Certain Parts with CSS for Print
Image Moves on Hover - Chrome Opacity Issue
Svg in Img Element Proportions Not Respected in IE9
@Import in @If Statement in SASS
CSS Input with Width: 100% Goes Outside Parent's Bound