Make a class' background color transparent?

I am making a website that uses nothing but jquery-ui for theming开发者_如何学Go.

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)

The easiest way to do this is to create a small flat image in Photoshop, Fireworks,GIMP,Kreta etc. and set the color / opacity there. The above solutions will allow for transparency but they are

1) Not standards-compliant and

2) They 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;
}

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

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.