Bootstrap child opacity cannot overwrite opacity set in a parent

Asked Jan 15 '22 at 23:44

Active Jan 16 '22 at 01:20

Viewed 32 times

I am trying to set one opacity in a parent container and overwrite it in a child container but it does not seem to work

<div class="card bg-dark" style="opacity: .4">
    <div class="bg-light border-2 p-4 m-5 rounded" style="opacity: 1 !important;">
       ...
    </div>
</div>

I'm stomped. What am I missing?

edited Jan 16 '22 at 01:20

asked Jan 15 '22 at 23:44

santa

11,716
43
149
239

1

Probably want to use rgba instead of opacity: https://meetanshi.com/blog/opacity-vs-rgba/ – first last Jan 16 '22 at 00:03
Hmm, doesn't seem to do a thing either. – santa Jan 16 '22 at 00:17
Both the child and the parent opacities are set correctly. If you want to have the child visible, the parent needs to be visible as well. – Chase Ingebritson Jan 16 '22 at 00:28
rgba: https://jsbin.com/feteyorapi/1/edit?html,output – first last Jan 16 '22 at 00:31

Bootstrap child opacity cannot overwrite opacity set in a parent

0 Answers0