How to avoid inheriting opacity property in CSS?


Tags: css,opacity

Problem :

I have a div element to which I set opacity: 0.7; in the CSS file because I would like the text inside it to be opaque. I display some images inside this div, but the images appear with the inherited opacity property. The result are opaque images.

Is it possible to give a CSS property to the images not to inherit the opacity of the div that contains them? If not, how can I avoid having the images opaque?

Thanks.



Solution :

If you're using opacity to allow the text to have partial transparency, then simply set the color of the element:

#elemId {
    color: rgba(0,0,0,0.7);
}

This lets you avoid adjusting the opacity property, and should work in all browsers that support the opacity property, too.


    CSS Howto..

    How do I position divs inside header?

    How to place two canvases adjacent to each other and on top of a third one

    How do I make an erasing animation in CSS? [closed]

    How to use “Monotype Corsiva” font in CSS statement?

    How do I put a border around a tr tag?

    CSS how to center ::after pseudo elem

    How do I scale an SVG background-image without honoring aspect ratio in Firefox?

    How can I make this kind of a border?

    My jquery slideshow is not functioning properly

    How to Hide Specific Part of Flash Object Using CSS?

    How to get floated divs align to the top?

    css - I've got a nested floating div, how do I get it to fill the entire 100%?

    Fixing GoogleMonkeyR column width issue. How to change a script's CSS?

    How to make search bar responsive using CSS

    How to add colour classes to this css

    How to change the body background for three different div-s

    How to make the element located in the center of a div?

    How do I create a 3 nested stamina bar that will regenerate from last to first

    How to change the style of an active menu with php + css

    How to position SVG with CSS?

    How do I display other info on page using only CSS and HTML

    How to create an animated rainbow line using CSS or Javascript?

    How does Matt Haughey's blog insert rosettes in each post title? [closed]

    How to select text under multiple “div-li-a href” using css in selenium web driver

    How to set incremental CSS classes in each Table Cell with jQuery?

    How to make dropdown hide when clicked anywhere outside of it?

    CSS: how to make a DIV with display: table-celll extend 100% in width

    how to change, in CSS files, src attribute for images dynamically at deploy? (ASP.NET Web Forms)

    how to remove elements in document fragment after append

    How to convert css into bss