CODEWITHSUNDEEP
htmlcss
Charanoglu
Charanoglu

Reputation: 1339

Cannot apply a transparent background to the a child div

I have the following html design:

body
{
  background-color: green;
}
.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e3eaef;
    border-radius: .25rem;
}

.card-header:first-child {
    border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-header, .card-title {
    margin-top: 0;
}

.card-header {
    padding: .75rem 1.5rem;
    margin-bottom: 0;
    border-bottom: 1px solid #e3eaef;
}

.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.5rem;
}

.p-4 {
    padding: 2.25rem !important;
}
<div class="card">
  <div class="card-header pt-4 pb-4 text-center bg-primary">
        <span>THIS IS THE HEADER</span>
  </div>
  <div class="card-body p-4">
    THIS IS THE BODY
    <button class="btn btn-primary" type="submit"> Login </button>
    </div>
</div>

this is how the author of the theme has created the cards. Now, I want make the header of the card transparent, so I can see the color of the background.

I tried to apply background-color: transparent; to card-header class, and of course this won't work because the class card have a white color, but I cannot modify the class card because I'll lost the color for the body controls.

This is a test fiddle ready for you.

And this is actually the result:

enter image description here

Essentially the header should have as background the green color.

Upvotes: 0

Views: 76

Answers (2)

Dylan Lawrence
Dylan Lawrence

Reputation: 3

If, I am understanding your question correctly, it seems like you want to change the background color of your header.

To do this, you can change the opacity of the background color if you chose to in the .card css:

.card {
background-color: #ffffff00; }

Which will make the opacity of the card transparent. You can also make it semi transparent, by changing the last two digits to any number between fa and 00, like #ffffff7a. Alternatively you can just put the word transparent here as well. 

.card {
background-color: transparent; }

Upvotes: 0

romellem
romellem

Reputation: 6491

You'll have to remove the background-color: #fff; on the .card element if you want the .card-header to view the background color of the body. You can move that white background color to other elements within the card instead, but fundamentally it is not possible to have the "stacking" order be:

.card-header -> .card -> body

Where .card has a solid background, yet .card-header is supposed to "see through that" and view the background of the body.

body {
  background-color: green;
}

.card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  /* background-color: #fff; */
  background-clip: border-box;
  border: 1px solid #e3eaef;
  border-radius: .25rem;
}


/* All immediate children of card (that aren't the header) will have a white bg */

.card > *:not(.card-header) {
  background-color: white;
}

.card-header:first-child {
  border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}

.card-header,
.card-title {
  margin-top: 0;
}

.card-header {
  padding: .75rem 1.5rem;
  margin-bottom: 0;
  border-bottom: 1px solid #e3eaef;
  background-color: transparent;
}

.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.5rem;
}

.p-4 {
  padding: 2.25rem !important;
}
<div class="card">
  <div class="card-header pt-4 pb-4 text-center bg-primary">
    <span>THIS IS THE HEADER</span>
  </div>
  <div class="card-body p-4">
    THIS IS THE BODY
    <button class="btn btn-primary" type="submit"> Login </button>
  </div>
</div>

Upvotes: 1

Related Questions