Opacity CSS That Works for All Browsers

Opacity CSS that works for all browsers?

Straight from Css-Tricks.com (this covers everything I can think of):

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

What transparent / Opacity Background Codes are compatible with ALL browsers?

I'm not totally clear which browsers you're looking to support - if you mean just all the modern browsers then you wouldn't be particularly concerned about compatibility - but anyways:

background-color: transparent; should work just about anywhere.

If you want an entire element to be partially opaque then you can use filter for IE8 and opacity for everything else, as shown here.

If you want to be able to set background-color (or any other colour) to a partial-opacity colour, you can use rgba, eg: color: rgba(255,0,0,0.5);. More info + support tables here here. Spoiler: it doesn't work in IE8.

Which css properties for cross browser opacity are recommend for usage today?

.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;
  }

For today usage.

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

source

CSS opacity working in Firefox & Internet Explorer, but not Chrome & Safari (WebKit)

This is a long-standing bug in WebKit browsers like Safari, and WebKit-derived Blink browsers like Chrome and Opera. Basically, opacity does not normally work on inline display states like display: inline elements (which is the default for a tags).

The most-common way to work around this is to change the display state to something like, display: block or display: inline-block.

Working example:

Adds display: inline-block to .menuLink.

body {    color: white;}
.menuContent {    display: flex;    justify-content: center;    align-items: center;}
.menuTable {    table-layout: fixed;    width: 300px;    height: 300px;    border-spacing: 40px;}
.expensesCell {    height: 300px;    width: 300px;    text-align: center;    border: 5px solid white;    background-clip: padding-box;    border-radius: 20px;    font-weight: bold;    font-size: 2.5em;    vertical-align: middle;    overflow: hidden;}
.menuLink {    color: white;    text-decoration: none;    margin: -10em;    padding: 10em;    display: inline-block;}
.expensesCell:hover {    background-color: lightsteelblue;    border-color: yellow;    color: yellow;}
.expensesCell {    background-color: rgb(22,167,67);}
.disabledMenuItem {    opacity: 0.1;    cursor: default;        }

<div class="menuContent">    <table class="menuTable">        <tr>            <td class="expensesCell">                <a id="HyperLinkExpenses" href="staff/Expenses.aspx" class="disabledMenuItem menuLink">                    <div>Expenses</div>                </a>            </td>        </tr>    </table></div>

CSS Opacity not working in IE11

That appears to be yet another IE bug.. As a work-around, you could instead add the opacity via the background property with a rgba() color. Then simply add the opacity to the td element.

Updated Example - results seem consistent across browsers.

.faded {
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;
}
td {
    opacity:0.4
}

How CSS property opacity renders in browsers (IE, Chrome, Firefox, Opera)?

Opacity is done with an average operation with the pixel value that's behind with weight-age based on the value of opacity.

For example if you have a pixel

R: 200, G: 220, B: 100 at 10, 10

And you want to render an element with a background color of 150, 120, 100 and opacity: 0.5 over it, the resultant pixel color will be calculated as:

opacity = 0.5

R = 200 * (1-opacity) + 150 * opacity
G = 220 * (1-opacity) + 120 * opacity
B = 100 * (1-opacity) + 100 * opacity

The above calculation will be performed (likely at hardware level) for all pixels the translucent element falls over.

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

All necessary opacity settings for all browsers?

Opacity is supported in all browsers even IE. If you want to check if your CSS is supported on any browser just visit CanIuse.

CSS opacity only to background color, not the text on it?

It sounds like you want to use a transparent background, in which case you could try using the rgba() function:

rgba(R, G, B, A)

R (red), G (green), and B (blue) can be either <integer>s or <percentage>s, where the number 255 corresponds to 100%. A (alpha) can be a <number> between 0 and 1, or a <percentage>, where the number 1 corresponds to 100% (full opacity).

RGBa example

background: rgba(51, 170, 51, .1)    /*  10% opaque green */ 
background: rgba(51, 170, 51, .4)    /*  40% opaque green */ 
background: rgba(51, 170, 51, .7)    /*  70% opaque green */ 
background: rgba(51, 170, 51,  1)    /* full opaque green */ 

A small example showing how rgba can be used.

As of 2018, practically every browser supports the rgba syntax.

---

Related Topics