Cross Browser Rgba Transparent Background While Keeping Content (Text & Images) Non-Transparent

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.

Making text background transparent but not text itself

Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.

.content {
    padding:20px;
    width:710px;
    position:relative;
    background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */
    background: rgba(204, 204, 204, 0.5);
}

See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.

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.

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/

non-opacity border for opacity element

There isn't a non-opacity attribute but what you can do is set the background colour of that div with RGBA. This allows you to specify an opacity essentially, but just for the background (so it won't affect the border)

background: rgba(0, 255, 0, 0.4);

This will achieve what you want, a red border with that transparent looking background. Demo HERE. This won't however, make inner content, such as images or text transparent. Though you can set the opacity on those elements freely without worrying about the border of the parent.

You can find a good article that details the difference between opacity and RGBA here and here

It should be noted that, as expected, IE8 and below do not support RGBA, though it can be "hacked" with CSS3 PIE.

CSS: opacity only background, not the text inside

The easy way would be to move the text into a separate div, like so. Basically you apply the opacity to a separate div and position the text on top...

<div id="parent">
   <div id="opacity"></div>
   <div id="child">text</div>
</div>

div#parent { position:relative; width:200px; height:200px; }
div#child { position:absolute; width:200px; height:200px; z-index:2; }
div#opacity { position:absolute; width:200px; height:200px; z-index:1; }

The other route would be rgba. Don't forget there's a separate css property to feed IE since it doesn't support the rgba property. You can also feed a transparent png.

#regForm {
   background: rgb(200, 54, 54); /* fallback color */
   background: rgba(200, 54, 54, 0.5);
}

And for IE...

<!--[if IE]>

   <style type="text/css">

   .color-block {
       background:transparent;
       filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
       zoom: 1;
    } 

    </style>

<![endif]-->

Personally I'd go with the first option because it's less of a hassle.

Red bg + black field with opacity on 85 = pink text

You can do it by instead using an rgba background on your element:

Live Demo - this will work "in every browser you care about", and my jsFiddle includes the recommended IE conditional comment to make it also work in that browser.

.blackbalk {
     /* 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.85);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#D8000000, endColorstr=#D8000000)";
}

How to create parent div with opacity while keeping the opacity of the text at 100%

What I fiddled upon and came on conclusion though is this is what you need I think.

Below is CSS that you have to use.

Fiddle: Click HERE

Demo (Transparent background)

html, body {
    margin: 0;
    height: 100%;
    background-color: #575980;
}
#container {
    width: 200px;
    height: 300px;
    cursor: pointer;
    overflow: hidden;
    margin: 100px auto;
    border: 1px solid #333;
    background-color: #000;
    box-shadow: 0px 2px 8px #111;
}
#container_inner {
    opacity: .8;
    margin: auto;
    width: 200px;
    height: 300px;
    transition: .5s;
    position: relative;
    background-color: #FFF;
    background-image: url('http://static.mmo-champion.com/mmoc/images/news/2010/march/ss973.jpg');
    background-size: 200% 100%;
    background-position: 60% 50%;
    box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.5);
}
#container_inner:hover, #container_txt:hover {
    opacity: 1;
}
#container_txt {
    color: #fff;
    height: 0px;
    bottom: 0px;
    width: 200px;
    transition: .2s;
    position: absolute;
    font: normal 1em calibri;
    background-color: rgba(0, 0, 0, 1);
}
#container_inner:hover #container_txt {
    height: 100px;
    opacity: 1;
}
p {
    top: -5px;
    padding: 0px 10px;
    position: relative;
}
p a {
    color: #fff;
    text-decoration: none;
}
#p_txt {
    top: -15px;
    position: relative;
    font-size: 12px;
}

---

Related Topics