Change alpha for an image hover in CSS2 standard? - css

i'm trying to add alpha effect for my image. the image is in rounded corner rectangular shape. i know there is attributes to change the alpha in CSS3, but i'm trying to be compliant with the w3c standard, which is still CSS2.
Sorry i didn't state my question correctly ealier. i was trying to change the alpha when i hover over the image using CSS2. i'm thinking to use the "background-image" for 100% alpha, and use the img tag for the 50% alpha. is there any better way to do this?

If the image is a PNG, you can include alpha directly in the image. Of course this would require the PNG Fix script for IE6.
Otherwise, you can use CSS to set the transparency.
Edit: Updated to only work on hover, note that this won't work in IE6.
img.transparent{
filter: alpha(opacity=100); /* internet explorer */
opacity: 1; /* fx, safari, opera, chrome */
}
img.transparent:hover {
filter: alpha(opacity=50); /* internet explorer */
opacity: 0.5; /* fx, safari, opera, chrome */
}

The typical way a web developer implements the transparent effects is using a partially transparent PNG file as a background.
div {
background: #FFF url(img/bg.png) repeat top left;
}
Using the png will work as you would expect, however opacity doesn't work as expected:
div {
filter: alpha(opacity=50); /* IE */
-moz-opacity: 0.5; /* Firefox */
-webkit-opacity: 0.5; /* Older Safari, Webkit */
opacity: 0.5; /* CSS Standard - Always last in the list */
}
This will make DIV 50% transparent, including all of its children, text and all. You will really need to play around with the opacity settings to make sure you get results as you would expect.

An even simpler fix, if you can stand a slightly worse user experience for IE6, is to use an alpha-transparent image for all modern browsers, and send an image with no transparency (or just one-color) to IE6. Looks a little worse for those few users, but is a lot less code to maintain.

Related

IE6 transparency Issues

I have been searching for answers for a couple of days and I found the answer awhile ago but it's not really what I want to get. The PNG backgrounds worked for IE8 and above. In IE6, it does not work. So I used this:
#nav_bar {
*background:none;
*width: 34px;
*height: 151px;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='../img/bg_navbar2.png');
I got a 100% transparent background but I want it only a 50% opacity. How do I tweak that line? Thanks for the help! I DON'T WANT TO USE JAVASCRIPT FOR THIS. I want a CSS3 semi-transparent background :)
IMAGES:
image in PS:
https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash3/431809_10200713326188890_673360556_n.jpg
actual background image in browsers [EXCEPT IE6]:
https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-ash3/575657_10200713331029011_963068431_n.jpg
Looks like you just need to add the Opacity. For example:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
I'd recommend using conditional HTML to call a stylesheet just for IE6. Stars are not to be trusted!

Can I change the opacity of the navbar in twitter bootstrap?

I stumbled onto this site: and started thinking. Is this possible using twitter's bootstrap? I don't see an opacity setting in the css file? Is it as easy as adding it.
In general, this is possible. Testflightapp uses the background-color: rgba attribute with an opacity level.
So if you want to set a background color with opacity to on of you element use this CSS:
elementname {
background-color: rgba(128, 128, 128, 0.5); /* Red [0-255], Green [0-255], Blue [0-255], Alpha [0-1] */
}
If you want to set the opacity on the element as a whole use:
elementname {
opacity: 0.5; /* opacity [0-1] */
-moz-opacity: 0.5; /* opacity [0-1] */
-webkit-opacity: 0.5; /* opacity [0-1] */
}
This is only supported by browsers that support CSS3.
A late answer, but I just found this question whilst looking up something very similar.
If you're using bootstrap with less, so that you're building the css yourself as part of an asset pipeline you should set opacity using the utility macro.
selector {
.opacity(50); /* opacity [0->100] */
}
It'll define the correct browser prefixes, including the IE filter syntax for you.
If you are using bootstrap with sass. You can use the opacity mixin.
#include opacity([from 0-100]);
This will take handle all browser compatibilities (if supported) dealing with opacity.

How do I remove parent opacity in CSS?

In my CSS I have the following:
.Thing {
filter: alpha(opacity=40);
opacity:0.4;
-moz-opacity:0.4;
}
.Thing button {
filter: alpha(opacity=100);
opacity:1;
-moz-opacity:1.0;
}
However, the button is still .4 opacity. I then try opacity: 2 and such and it looks like I can give it less opacity but not more. Is there a way I can remove it or do I have to write multiple rules to get everything but the button?
I am testing with Firefox and Chrome.
use rgba with a rgb fallback.
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.5); /*ie6 will ignore this*/
rgba will only apply opacity to the target element.
What i've recently been doing is using the rgbapng sass/compass plugin which generates a png image to use as a fallback for browsers without rgba support.
Note: you'll still need to use an ie6 png fix for this to work.
Not a fix for the opacity issue but a possible workaround.
How about removing the button from the normal document flow and then placing back inside the .Thing
Something like this: http://jsfiddle.net/CqgkM/

How to make a div's background color translucent?

I only want the background color of white in my div to be translucent roughly 50%. The content should be fully opaque. What's the proper way to do this? I imagined when I looked up the background CSS property, I'd find an opacity setting, but didn't. Don't care about IE6.
UPDATE: solving with the rgba solution given below in conjunction with CSS3PIE's solution for getting rgba to work in IE browsers.
You can use the background-color: rgba() notation:
#theIdofYourElement,
.classOfElements {
background-color: #fff;
background-color: rgba(255,255,255,0.5);
}
Edited to add the default background-color (for browsers that don't understand the rgba() notation). Albeit I was under the impression that all but IE do understand it (but I could be wrong, and haven't tested to be sure...).
Edit with thanks to #akamike.
Edited to address question from OP (in comments):
which browsers don't understand rgba? will they all in the future, is this part of css3?
The best information I could find is the CSS Tricks' rgba() browser support table, with a link to a demo and 'more complete' compatibility table.
If you want cross-browser opacity, you can handle each within your css definition
div
{
opacity: .50; /* Standard: FF gt 1.5, Opera, Safari, CSS3 */
filter: alpha(opacity=50); /* IE lt 8 */
-ms-filter: "alpha(opacity=50)"; /* IE 8 */
-khtml-opacity: .50; /* Safari 1.x */
-moz-opacity: .50; /* FF lt 1.5, Netscape */
}
There is a CSS property called backdrop-filter providing real translucency (as opposed to transparency, which is already available in CSS).
Currently supported by all modern browsers.
.my-selector {
backdrop-filter: blur(5px);
}
More about the selector
Browser support
Easiest way is to create a semi-transparent PNG and just use that as your background image for the div.
If you're using Photoshop (or similar tools) just create a 10px by 10px image that is all white -- then drag the opacity slider down to 50%. Save it as a PNG and you should be rockin'!
Using RGBA is also a possibility, but you're not just losing IE6 then -- there are still quite a few people using browsers that don't support the alpha scheme.

CSS background opacity with rgba not working in IE 8

I am using this CSS for background opacity of a <div>:
background: rgba(255, 255, 255, 0.3);
It’s working fine in Firefox, but not in IE 8. How do I make it work?
To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
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.
I believe this is the best because on this page has a tool to help you generate alpha-transparent background:
"Cross browser alpha transparent background CSS (rgba)" (*now linked to archive.org)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}
the transparent png image will not work in IE 6-, alternatives are:
with CSS:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}
or just do it with jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Though late, I had to use that today and found a very useful php script here that will allow you to dynamically create a png file, much like the way rgba works.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
The script can be downloaded here: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
I know it may not be the perfect solution for everybody, but it's worth considering in some cases, since it saves a lot of time and works flawlessly. Hope that helps somebody!
There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code. For This here is solution. For The solution you must follow this code and it’s better to go with it’s sequence otherwise you will not get perfect output as you wish. This code is used by me and it’s mostly perfect. make comment if it’s perfect.
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}
You use css to change the opacity. To cope with IE you'd need something like:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
But the only problem with this is that it means anything inside the container will also be 0.3 opacity. Thus you'll have to change your HTML to have another container, not inside the transparent one, that holds your content.
Otherwise the png technique, would work. Except you'd need a fix for IE6, which in itself could cause problems.
I'm late to the party, but for anyone else who finds this - this article is very useful:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
It uses the gradient filter to display solid but transparent colour.
To use rgba background in IE there is a fallback.
We have to use filter property. that uses ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
this is fallback for rgba(255, 255, 255, 0.2)
Change #33ffffff according to yours.
How to calculate ARGB for RGBA
this worked for me to solve the problem in IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Cheers
This solution really works, try it. Tested in IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
This a transparency solution for most browsers including IE x
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
The best solution I found so far is the one proposed by David J Marland in his blog, to support opacity in old browsers (IE 6+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}
After searching a lot, I found the following solution which is working in my cases:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}
*Important: To calculate ARGB(for IEs) from RGBA, we can use online tools:
https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Resources