Transparent div in IE - css

How can I display a div with an alpha background in IE > 7.
I've got this css code for all browser
background-color: rgba(102, 102, 102, 0.30);
but it doesn't work in IE 7,8. Don't test it in ie 9 or 10 actually.
Do someone know how to make it work, It's for put a transparent div over an image

I found the best cross browser option for opacity is to use a 30% transparent png as background of the top div

You can create another div only for background(same size as your div, position abolute etc) and then set it color + cross-browser transparency like
.transparent {
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}

Related

CSS Opacity Box

Alright So here is my CSS style sheet.
#mainheader,#content{
opacity:0.35;
text-align:center;
background-color:#000000;
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
And as you can see it's a box that's see through, but has a small black background making text look fuzzy. Example.
http://i.stack.imgur.com/18dOZ.png
When I take away that background color I get more clear text like this...
http://i.stack.imgur.com/ixLva.png
Alright So what i'm trying to say it what can I write to have that text above that box being very clear text and not with it's dark opacity.
If you want to use CSS3, try:
background-color: rgba(0,0,0,0.35);
instead of opacity.
http://jsfiddle.net/vsZtM/
References from W3.org about RGBA:
http://www.w3.org/TR/2003/CR-css3-color-20030514/#rgba-color
http://www.w3.org/wiki/CSS3/Color/RGBA
Instead of opacity, change background of containers with an alpha channel:
#mainheader,#content {
background: rgba(0,0,0,0.35);
}
Where last param is the opacity.
Opacity changes the opacity for the entire element, while background:rgba(0,0,0,.35) will change only the background color.
You should try using rgba instead of opacity like so:
background-color: rgba(0,0,0,0.35);
Note: this is CSS3 and will only work in IE9 and up, so for other versions you should provide a fallback like so:
background-color: #000;
background-color: rgba(0,0,0,0.35);
You can set the background-color as an rgba value, and leave off the opacity in your CSS statement. For example:
#mainheader,#content{
text-align:center;
background-color: rgba(0, 0, 0, .35);
border-top-style:ridge;
border-left-style:ridge;
border-right-style:ridge;
border-bottom-style:ridge;
}
This will let your text stay fully opaque, while your background is semi-transparent. As a note, however, this will not work in Internet Explorer 8 and below -- it will be a solid background.

How do I make a div transparent on a white body background?

The background-color of my body is #ffffff. And I have a div that I need is colored but it needs to be transparent or see through. Is it possible to do this using CSS3 or do I have to use images to achieve this?
body {
background-color: #ffffff;
}
.box {
background-color: #999999;
background-image: linear-gradient(to top, #999999 0%, #444444 100%) !important;
opacity: 0.7;
}
Update:
If you go here: http://pinesframework.org/pnotify/#demos-simple and look for the demo for Transparent Success you can see how the pop-up looks see through on a white background. I need to do something like that without using an image as they are using one.
It sounds like you want an alpha transparent background color. If that's the case, you can use RGBA colors, rather than a solid hex value and an opacity property. This way, only the background will have transparency, not the content.
In your case it would be:
.box {
background-color: rgba(255,0,0,0.7);
}
You can also specify a fallback color to browsers that don't support RGBA (IE 8 and older), or create a PNG image with the color fill you want. My vote is toward progressive enhancement, and just specify an alternate color for browsers that don't understand RGBA:
.box {
background-color: #ff4c4c;
background-color: rgba(255,0,0,0.7);
}
UPDATED: Per your comment below, this question appears to be a duplicate of CSS - Opaque text on low opacity div?.
You need to change the opacity of the background instead of the element:
.box {
rgba(255,0,0,0.6);
}
Or, since you are using a gradient, I would use this:
Ultimate CSS Gradient Generator
It will allow you to do semi-transparent backgrounds with a gradient.

Transparent Background in Internet Explorer

I set a transparent background in a div element. It's child element don't have a transparent background.
I have:
background: rgba(181, 182, 183, 0.6);
For IE, i tried below:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700, endColorstr=#B5B6B700);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700, endColorstr=#B5B6B700)";
What would be the correct hex value? Im not sure on the last two digits.
Try #MatTheCat's answer here for an IE transparent background fallback: CSS background opacity with rgba not working in IE 8
Looking at your current code, if you are having trouble getting the background to be transparent, you may need to add zoom: 1 in order to trigger hasLayout in IE.
Try this:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B5B6B700,endColorstr=#B5B6B7000);
zoom: 1;
More info on hasLayout.

Opacity of div's background without affecting contained element in IE 8?

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.
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);
}
[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)
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/
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.
Try setting the z-index higher on the contained element.
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>
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.
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);
}
Use RGBA or if you hex code then change it into rgba. No need to do some presodu element css.
function hexaChangeRGB(hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16),
g = parseInt(hex.slice(3, 5), 16),
b = parseInt(hex.slice(5, 7), 16);
if (alpha) {
return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
} else {
return "rgb(" + r + ", " + g + ", " + b + ")";
}
}
hexaChangeRGB('#FF0000', 0.2);
css ---------
background-color: #fff;
opacity: 0.8;
OR
mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;

Make an image transparent in IE to show non-transparent background

I'm trying to get this thing to work in IE (any version - works in FF, Opera, Safari, Chrome ...):
I have a DIV with a background-image. The DIV also contains an image that should be transparent onMouseOver. The expected behaviour now is that the DIV-background would shine through the transparent image (which it does in all browsers but IE).
Instead it looks like the image is getting transparent but on a white background, I can't see the DIV's background through the image.
Here's some code:
<div><img /></div>
And some CSS:
.dojoDndItemOver {
cursor : pointer;
filter : alpha(opacity = 50);
opacity : 0.5;
-moz-opacity : 0.5;
-khtml-opacity : 0.5;
}
.dragItem:hover {
filter : alpha(opacity = 30);
opacity : 0.3;
-moz-opacity : 0.3;
-khtml-opacity : 0.3;
background : none;
}
All of this is embedded in a Dojo Drag-n-Drop-system, so dojoDndItemOver will automatically be set to the DIV on MouseOver, dragItem is set to the href around the image (using the same class on the image directly doesn't work at all as IE doesn't support "hover" on other items that href).
Any ideas? Or is it an IE-speciality to just "simulate" transparency on images by somehow just greying them out instead of providing real transparency and showing whatever is beneath?
a.dragItem {/*Background behind the image*/}
a.dragItem img {/*Image is opaque, hiding the background*/}
a.dragItem:hover img {/*Image is transparent, revealing the background*/}
IE uses the CSS filter:alpha(opacity=x) taken from w3Schools CSS Image transparency. You can also apply it to DIV backgrounds.
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
I think that filters are a bad idea, so also you can use transparent pngs with IE as shown here.

Resources