How to Give Cross Browser Transparency to Element's Background Only

How to give cross browser transparency to element's background only?

you can use RGBA colors. I have made up an example for you:

http://jsfiddle.net/ypaTH/

ul {
 background: rgba(255, 255, 255, 0.5) //white with opcaity of 50%
}

ul li {
 color: #fff;
 background: rgba(0, 0, 0, 0.5) //black with opcaity of 50%
}

here is a workaround for IE and the compatibly list:
http://css-tricks.com/rgba-browser-support/

Cross browser rgba transparent background while keeping content (text & images) non-transparent

See this blog post for a cross browser method:

.alpha60 {
    /* 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)";
}

Web browser support

RGBa support is available in: Firefox
3+ Safari 2+ Opera 10

Filters in Internet Explorer are
available since Internet Explorer 5.5.

This means that this will work for
virtually everyone!

See here for an easy way to generate the colors for the IE filters.

Doing this should eliminate the need to use "base64 png images with 'data URI scheme'".

If you really, really want to generate client side .png images (I can't see the need for it here):

Generate client-side PNG files using JavaScript. Cool idea, really:

It was once again one of those nights
where I hacked like on drugs with no
end in sight. Sure, 5 years ago you
had loved me with such a project, but
in times of HTML5 with the canvas
element it is hard to impress you. So
take it as proof of creating client
side images without canvas, SVG, or
server side rendering and AJAX
processing.

But how is this possible? Well, I've
implemented a client-side JavaScript
library like libpng which creates a
PNG data stream. The resulting binary
data can be appended to the data
URI-scheme using Base64 encoding.

background transparency crossbrowser especially ie

You can work around this by layering two separate DIVs, one for the transparency and one for the actual content:

.container {
  position: relative;
}

.container .transparency {
  position: absolute;
  z-index: 1;
  background-color: ...;
  opacity: ...;
  /* apply same width and height as parent DIV */
}

.container .content {
  position: absolute;
  z-index: 2;
  /* apply same width and height as parent DIV */
}

Cross-Browser Transparent Letters

A couple of thoughts.

This example isn't exactly what you have described, but the result is good and should work well cross-browser:

http://jsfiddle.net/panchroma/JHvgp/

The key CSS is

h1.figcaption { 
color:white;
position: absolute; 
bottom: 0px; 
left: 20px; 
font-size: 90px; 
opacity: 0.35;
filter: alpha(opacity=35);
text-shadow: 2px 2px 2px #000;
}

Alternatively, maybe it's possible to do something with with sIFR ... not sure about this though.

Good luck!

EDIT

Good suggestion from Adrien Be below -- with improved cross-browser transparency code:

http://css-tricks.com/snippets/css/cross-browser-opacity/

cross-browser transparency - works in everything but ie 10

I met the same issue, I think the issue is reflection of IE8 hack

The best solutions is use suppurate css for IE8 with condition at the top which may not effect other version of IE :)

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

or you can try like this

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->  
<!--[if IE 8]>     <html class="ie8"> <![endif]-->  
<!--[if IE 9]>     <html class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html>             <!--<![endif]-->

the you can have suppurate code for dirrent versions

   .element {  
        background: red;  
    }  
    .ie7 .element {  
        background: blue;  
    }  
    .ie8 .element {  
        backgroundt: green;  
    }  
    .ie9 .element {  
        margin-left: yellow;  
    }

Transparent Background Color, but only transparency

With your help i found the best solution for me
list($r,$g,$b) = array_map('hexdec',str_split($colorName,2)); echo 'rgba('.$r.','.$g.','.$b.',0.5)';
Thanks to all

CSS DIV with Cross Browser Opaque Border with Solid background

This depends on which browsers you want/have to support, but you can use the CSS3-rgba declaration to define colors (standard rgb with additional a - which is the alpha/transparency channel). Also, depending on the colors of the background and border, you might need to add the background-clip property.

rgba(255,255,255,.5);
background-clip:padding-box;

would give you an 50% opaque white. This works on every attribute you can specify a color on.

It's pretty good supported with the (how surprising) exception of IE<=8.

Here is an example for you: transparent border with solid bg.

For the sake of completeness: The necessary background-clip has the same browsersupport, but here is a browser support table

EDIT:

For support for IE6+ you should take a look at CSS3Pie. It emulates CSS3 Properties like rounded corners or other color spaces via VML.

How to implement Cross Browser Opacity Gradient (Not Color Gradient)

There's -moz-linear-gradient for recent Firefox versions and -webkit-gradient for WebKit browsers. Transparency for those two should be possible by using rgba colors.

https://developer.mozilla.org/en/CSS/-moz-linear-gradient

https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html

The only real 100% cross-browser compatible solution is an image though.

Cross browser W3C compliant semi-transparent background color

As others have said, no IE filters are not W3C compliant. They also incur significant overhead and have performance ramifications. Unless I am mistaken when a filter is applied to an HTML element it will be applied to everything in that element including its text. So you'd end up with semi-transparent text too. There may be a way to keep that from happening but I haven't come across it. Also there are times when IE filters don't play well with semi-transparent PNGs as this article mentions.

Speaking of PNGs, the idea of using a sprite really only works if you have a specific height or width or both. So this really won't work for what you need, like Merianos Nikos said. Also tiling a 1x1 image is a really terrible idea. I say this because there are performance issues when you do that, especially with IE6. Though IE6 may not be a concern for this, tiling such a small image still causes a performance hit since the browser must draw and redraw each and every one. See this StackOverflow entry.

For this situation I would use something like Modernizr which will make rgba available to use in browsers that don't support rgba. After customizing a download for just rgba and a few other things (HTML5 shim, yepnope, and adding CSS classes) the download was 6.1kb. Not a huge hit to make development easier.

Update I misspoke when I said that Modernizr enables rgba. It doesn't do that but it will let you know that rgba is enabled in the browser. It will add classes to the html tag that tells you the abilities of the browser.

Best way to background cover cross browser

You could try the backstretch plugin

It is a one line javascript solution, just include it (also jquery) in your headers and call it as the example:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.backstretch.min.js"></script>
<script>
    // To attach Backstrech as the body's background
    $.backstretch("path/to/image.jpg");
</script>

Official page:
http://srobbin.com/jquery-plugins/backstretch/

Github source:
https://github.com/srobbin/jquery-backstretch

How to Give Cross Browser Transparency to Element's Background Only