CODEWITHSUNDEEP
jquerycssopacitybackground-color
Ovi
Ovi

Reputation: 2559

add opacity to a css class

Is there a way to set opacity in a css class, in jquery you could do this: 

$(result).parent().css({ 'background-color': '#eeeeee', 'opacity': '0.7' })

any way?
I need to put these to properties in a css class.

Upvotes: 2

Views: 6158

Answers (5)

Jamie Dixon
Jamie Dixon

Reputation: 53991

There are different CSS properties that are currently required for cross-browser compatibility.

filter:alpha(opacity=50); // For IE
-moz-opacity:0.5;         // Older versions of Mozilla
-khtml-opacity: 0.5;      // For Safari 1.x (I believe)
opacity: 0.5;             // General usage

Personally I'd stick with using jQuery to do this for you since they've already developed their method with multiple browsers in mind.

Upvotes: 6

daniel.herken
daniel.herken

Reputation: 1105

To set opacity in all major browsers do the following

HTML:

<div class="opacityElement"></div>

CSS:

.opacityElement {
    filter:alpha(opacity=50);  // IE
    -moz-opacity:0.5;          // Firefox
    -khtml-opacity: 0.5;       
    opacity: 0.5;         
}

Upvotes: 1

Quentin
Quentin

Reputation: 943142

There is no such thing as a CSS class (HTML has classes, CSS has class selectors). It sounds like you mean a CSS rule-set though.

some selector {
    opacity: 0.7;
}

Upvotes: 0

James Allardice
James Allardice

Reputation: 165941

Yes, exactly the same way as you've done it with jQuery:

.className { opacity: 0.7 }

Note however that this will not work in Internet Explorer, so you need to add another property, filter: alpha(opacity=70)

Upvotes: 0

Alex
Alex

Reputation: 9031

Like this:

.myClass{
  opacity:0.4;
  filter:alpha(opacity=40);
}

The filter:alpha(opacity=40); is for IE

Upvotes: 0

Related Questions