Make class background color transparent?

Question

I am creating a website that uses nothing but jquery-ui for the theme.

Well, in my application, I need to make alternating colors in a row in a list. Right now all the lines are color .ui-widget-content. Well, I can apply the class to alternating lines without any problems, but I want the alternating color to be a very transparent version of the background color in .ui-widget-header. How do I do this using only html jquery and CSS? (I really hope not to use javascript to do this little trick though)

Answer 1

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 provide transparency, but they

1) Does not meet standards and

2) They can lead to the fact that the text contained in the div will also be transparent (usually this is an undesirable result in the 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;
}

Answer 2

Assuming I misunderstood your question and that you can use a separate CSS class for alternate lines, for example .ui-widget-content-alt, you can 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 for IE.

:

• CSS- - CSS

Answer 3

There is no standard way to do this.

You can use css opacity and fiter to achieve it.

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

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

Using this will cause CSS conformance checking to fail.