how to use CSS opacity to let background bleed through in IE8? - html

I have an HTML page with a pink background image. I want to define a DIV on the page for text, but I want the background to show in the DIV much paler, almost white. I tried this, but it doesn't seem to work on IE8.
My HTML...
<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="div1">
testing
</div>
</body>
</html>
and here's my CSS file ...
body
{
background-image:url('back.jpg');
background-repeat:repeat;
}
.div1
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
background: #ffffff;
}
Any ideas?

The thing you have to keep in mind is that the opacity property will affect the opacity of the entire element, including its text/children. If you want to affect JUST the background, you will need to approach it in a different way.
You could use RGBA for modern browsers:
.div1 {
background-color: rgba(255,255,255, .4);
}
Then, in a separate IE stylesheet (using conditional comments or similar method):
.div1 {
background: transparent url(white_trans.png);
}
You would need to make a PNG-24 image, 1px x 1px, that was just simply white reduced to 40% opacity. That will work in IE7 & 8.

You should add the zoom: 1 declaration to your .div1 block.

If you are using a plain (solid) color as background, then, I would suggest you to just use a paler pink for your DIV.
This will create the illusion of opacity. And more importantly, you will not face issues with some browsers.

Related

CSS Opacity Property

Hi i am using CSS Opacity Property for a div tag and it works well but the problem is when I write some text or paste images on that div tag they also become fade. I just need div back color to be fade and not the div content. My code is ...
#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
Thankyou !!!
It's much easier to use rgba() or a transparent PNG for the background.
rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
You can use rgba() property for this:
write like this:
#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
For IE you can use IE filter
background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */ zoom: 1;
You can generate your filter from here http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
Just use 1px semi transparent gif and repeat it by x and y. As far as I know it is the most easy way to set semi transparent background.
Ofcourse the opacity applies to the child elements as well.What you can do is to segragate your markup.
<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>
Align your markup carefully such that the markup resembles what you want.
Why don't you reset the opacity then?
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Your best bet without CSS3 is probably to create a div and put another div positioned on top of it, but not nested inside of it. Opacity filters down to ALL elements inside of the element with the opacity set.
If you put a div immediately to the right, and then gave it a margin of -750px;, you could give it an opacity of 1, but the div behind it could have an opacity of 0.1, and this would work fine.
With CSS3 you could do this:
#fade
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
and just the background would be 0.1 opacity. The text would still be 1.
What I personally do most often though, is I create a small .png with the transparent background that I want, and then I set that .png as the background of an element. In photoshop I could set the opacity of the white background to 0.1, then save a 50X50 square, and then I've got nearly perfect transparency (no IE6).
something like http://jsfiddle.net/PWM5f/ you need

How to get opaque text on div with transparency?

I did some searches on google for this and there are a lot of various examples, some outdated some not.
I also had a look at the example at the bottom on http://www.w3schools.com/Css/css_image_transparency.asp which is similar to what I want to achieve. In the example the text on the div is also a bit transparent but it's hard to see because it's black text on a white div.
I have a background image with a lot of black elements in it and on top of that a black div with 55% opacity, when I add white text on top of that some of the very dark elements in the background image is slightly visible through the white text which I don't want.
Anyone with a recent example/best practice on how to achieve this (either with transparent png or css)? It doesn't have to support IE 6..
Thanks in advance.
Milan is almost correct. You'll want to make the background of the transparent div transarent via RGB. For black that would be (0,0,0). To add transparency, you'd simply add a decimal (similar to 'opacity:.55' for CSS; so to get a 55% opaque black background, you'd use
background: rgba(0,0,0,0.55);
So, to make an example div with a 55% opacity background w/ white text, use:
.blackopaque {
background:rbga(0,0,0,0.55);
color:#ffffff;
}
The 'background' changes the background, and the color changes the color of the text (white, in this case).
Hope this helps!
Matt
EDIT: IE Support
Adding support to IE is easy, all you have to do is specifically target IE users with their own stylesheet for that element. Open up your theme's header file, let's say you have a stylesheet designed specifically for IE w/ a transparent PNG to get the transparent black effect, named IE.css. You'd want to insert this code below your existing CSS inclusion:
<!--[if IE]>
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'template_url' ); ?>/IE.css" />
<![endif]-->
This conditional stylesheet makes itself available only to IE users, so the rest of the ahem, more advanced browsers can enjoy RGBa.
For the IE stylesheet, you'd want something like this:
.blackopaque {
background:url('*link to your 55% opaque png file*')
color:#ffffff;
}
NOTE You'd only have to include that one rule in the IE stylesheet, just so that it overrides the default rule for that background.
RGBA isn't supported until IE9, so your best bet if you need to support earlier versions of IE is simply a semi-transparent PNG.
Sorry I thought text should be transparent, here is transparent background
#content {
position:relative;
z-index:1;
}
#content:before {
content:"";
position:absolute;
z-index:-1;
top:0;
bottom:0;
left:0;
right:0;
background:url(your_image.jpg);
opacity:0.7;
}

html element background color not showing in IE 8

I'm using the <body> tag as a wrapper for three divs on a site where every single background color is white.
I've set the background color to #fff for the html and body in the css, and the site is rendering correctly in every browser (including IE 6 and 7) except IE8:
I've even tried setting the style for html directly inline like so: <html style="background-color: #fff"> but that doesn't seem to change anything.
Not even sure what might be causing the bug.
The problem is the following property in your CSS:
:focus{
outline:0;
background-color:#f2f3f6;
border-color:#996
}
Apparently, on loading IE8 decides that the html element has focus, whereas other browsers don't do this. Remove the background-color property here and it'll all stay white.
What happens when you insert this code into your HTML?
body div
{
background-color: white !important;
}
Normally, browsers interpret and apply the last line of CSS that they read to an element, so background-color: red; background-color: blue; would result in a blue background color.
!important tell the browser to ignore all other property re-decelerations, so background-color: red !important; background-color: blue; would make the background color red, even though you told it to be blue.
I think background:#FFFFFF; will fix it. It worked for me.
internet explorer support 6digit color code i.e. instead of #fff .. use #ffffff
I hope you may understand this

Problems with transparency in CSS

Ok so heres the deal. I have a page I'm creating in html and css. I've got a div whose background needs to be transparent.
However when I use opacity: .6; Everything in the div goes see through.
Is there any way to fix this so it works in safari, IE, and firefox?
No, there's no real way to fix this problem (though you can in CSS3). There are two possible approaches:
1) Use a transparent png background rather than doing it with CSS (with hacks for IE6 which doesn't allow transparent pngs)
2) Use two separate divs, and use absolute positioning to position one over the top of the other. This requires knowing certain dimensions, so may not always apply, but may work in your situation.
.outer {
position: relative
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000; /* Or whatever */
opacity: 0.6;
-moz-opacity: 0.6;
filter: alpha(opacity=60);
}
<div class="outer">
<div class="background"></div>
Content
</div>
Note that sometimes the height: 100% rule for .background doesn't work in IE 6, in which case you should try applying hasLayout to first .outer, and if that fails to .background as well (you can add hasLayout with the CSS rule zoom: 1 without side-effect). If neither of those works, you'll likely need an expression value for IE 6. If you need further help leave a comment.
As smerriman said, it's much simpler in browsers which support CSS3 (more specifically, rgba or hsla color values). It would be as simple as background-color: rgba(0, 0, 0, 0.6).
Just use transparent image as a background for that element. When you use opacity in css for a given element, everything in that element and including that element receives that styling. Look here:
http://jsfiddle.net/zV4BR/
you should use both
opacity in css and
filter:alpha(opacity=60);
for ie and stuff
use this method
How to give cross browser transparency to element's background only?
use Rgba instead opacity. see example here: http://jsfiddle.net/ypaTH/
you will have to set background on inner elements also.
Edit: to make rgab code for IE use this http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
it should be
opacity:0.6
beside that opacity works differently depending which web browser you use

TDs background color not visible in print preview

I have td like this:
<td align="left" bgcolor="#FF0000">
In browsers, there is a red background color applied to it but when i see print preview of this, there is no red color in the background. also the font color is white but it also gets converted to white when print previewing it.
Anyone knows what can be the reason?
Thanks
To make WebKit browsers (Safari, Google Chrome) print the background image or color you should add the following css style to the element:
-webkit-print-color-adjust: exact;
The printing of background colors is supported differently by each browser, and it is often off by default. For instance, in Safari, it is an option in the print dialog called "Print Backgrounds". I am not sure where the option is in other browsers.
I just ran into this issue myself and believe I have a solution. I originally did this with an H1 tag but then used the same code for a TD
h1 {
background-color:#404040;
background-image:url("img/404040.png");
background-repeat:repeat;
box-shadow: inset 0 0 0 1000px #404040;
border:30px solid #404040;
height:0;
width:100%;
color:#FFFFFF !important;
margin:0 -20px;
line-height:0px;
}
Here are a couple things to note:
background-color is the absolute fallback and is there for posterity mostly.
background-image uses a 1px x 1px pixel of #404040 made into a PNG. If the user has images enabled it may work, if not...
Set the box-shadow, if that doesn't work...
Border = 1/2 your desired height and/or width of box, solid, color. In the example above I wanted a 60px height box.
Zero out the heigh/width depending on what you're controlling in the border attribute.
Font color will default to black unless you use !important
Set line-height to 0 to fix for the box not having physical dimension.
Make and host your own damn PNGs ;)
See my fiddle for a more detailed demonstration.
Try using CSS if you can and if the background doesn't work with the print version specify a print css document.
<link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" media="all" />
<link rel="stylesheet" rev="stylesheet" href="print.css" type="text/css" media="print" />
Basic CSS here:
td{
background-color:#FF0000;
}