Make a class' background color transparent?

Question

Hello, I am making a website that uses nothing but jquery-ui for theming.

Well, in my application I need to do alternating colors per row on a list. Right now all of the rows are just the color of .ui-widget-content. Well, I can apply a class on alternating rows with no problem, but I want for the alternating color to be a very transparent version of the background color in .ui-widget-header. How would I do this using nothing but html jquery and CSS? (I'm really hoping to not have to use javascript in order to do this little trick though)

Answer 1

Assuming that I didn't misunderstand your question, and that you can use a separate CSS class for alternate rows like .ui-widget-content-alt, you may want to use the following CSS:

.ui-widget-content, .ui-widget-content-alt {
    background-color: #000;
}

.ui-widget-content-alt {
    filter: alpha(opacity=20);
    opacity: 0.2;
}

• The opacity property is the CSS standard for opacity values, and works in Firefox, Safari, Chrome and Opera.
• The filter property is for IE.

You may want to check the following article for compatibility of the opacity property with older browsers:

• CSS Tricks - CSS Transparency Settings for All Browsers

Answer 2

There is no standard way of doing it.

You can use css opacity and fiter to achieve it.

Something like the following would give you 80% black transparent color

    .someClass { background-color:#000; -moz-opacity: 0.8; opacity:.80;filter: alpha(opacity=80);}

Using this will cause your CSS to fail compliance checks.

Answer 3

The easiest way to do this is to create a small flat image in Photoshop, Fireworks, etc. and set the color / opacity there. The above solutions will allow for transparency but they are 1) Not standards-compliant and 2) May cause the text contained in the div to also be transparent (usually an undesirable result in design).

So...

.ui-widget-content-alt {
background: transparent url(images/my_80%transparent_black_bg.png) top left repeat;
}
.ui-widget-content {
background: transparent url(images/my_80%transparent_white_bg.png) top left repeat;
}