CODEWITHSUNDEEP
cssopacity
abrahab
abrahab

Reputation: 2500

css - stop inheritance of opacity

I have div with opacity:0.80; property that contain text and button. The problem is that button and text also inheritance opacity from div. How to fix it?

I already tried to add opacity:1; to button and text <p> tag, but it does not helps.

Upvotes: 6

Views: 8040

Answers (2)

underscore
underscore

Reputation: 6877

you can't fixed it.Child elements also getting parent opacity

One solution is using rgba:

USE :after pseudo element

element:hover:after {
    background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}

Upvotes: 1

Michael Koper
Michael Koper

Reputation: 9771

I think you want the opacity on the background instead. As Prisoner said, not supported by old browsers.

background-color: rgba(0, 0, 0, 0.8);

w3schools: RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.

Upvotes: 10

Related Questions