1

This is completely separate from the question is it marked as a duplicate for...

I can make some items transparent - just not the item I want because something is overriding it. It is a bootstrap issue - not just css. I have taken out the requested html to keep the focus on the main question.

I am trying to create a Bootstrap card which has an opaque body, but a solid header and table. I tried (sass):

.card-body {
    opacity: 0.75 !important;
    background-color: $card-bg;
}

But it had no affect. So I tried:

.card {
    opacity: 0.75 !important;
    background-color: $card-bg;
}

.card-header {
    opacity: 1 !important;
}

table {
    opacity: 1 !important;
}

But the whole card, including header and table is then opaque. How can I achieve only the body being opaque?

Hawke
  • 564
  • 4
  • 19
  • please support your question with Html too – Deepak Verma Mar 11 '19 at 09:04
  • Added in question – Hawke Mar 11 '19 at 09:09
  • While the dupe question doesn't directly answer your issue here, if you read the comments, your issue is discussed. Essentially, your problem is that `.card` itself has a background and `.card-header` and `.card-body` are children of that. As such, the background transparency is multiplied, i.e. the header and body *are* fully opaque, but the parent element is *not*, so a child opacity of `1` is equivalent to an opacity of `.75` (the parent). Long and short, you need to apply opacity values to the children idependently and and the parent itself needs to not apply *any* background. – Chris Pratt Mar 11 '19 at 17:51
  • Thanks for the explaination. In that case, I thought my first example would have worked. It’s applied to card-body only and I am not applying any css to .body. It might be that bootstrap does set a default background. – Hawke Mar 12 '19 at 22:19
  • Can you please explain further? How to I override the bootstrap settings to remove any background it is setting for .card? As you can see in my first example, I was only setting opacity for the child .card-body – Hawke Mar 22 '19 at 19:18

0 Answers0