无法将透明背景应用于子div

Question

我有以下HTML设计：

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>
    

这就是theme的作者创造了cards的方式。现在，我想让header的card透明，所以我可以看到背景的颜色。

我试图将background-color: transparent;应用于card-header类，当然这不起作用，因为类card有白色，但我不能修改类card因为我将失去身体控制的颜色。

This is a test fiddle为你准备好了。

这实际上是结果：

基本上header应该有background绿色。

Answer 1

如果你想让background-color: #fff;查看身体的背景颜色，你必须删除.card元素上的.card-header。您可以将白色背景颜色移动到卡片中的其他元素，但从根本上说，不能使“堆叠”顺序为：

.card-header -> .card -> body

.card有坚实的背景，但.card-header应该“透视那个”，并查看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>

Answer 2

如果，我正确理解您的问题，您似乎想要更改标题的背景颜色。

为此，如果您在.card css中选择，则可以更改背景颜色的不透明度：

.card {
background-color: #ffffff00; }

这将使卡的不透明度透明。您也可以通过将最后两位数字更改为fa和00之间的任意数字，使其半透明，例如＃ffffff7a。或者你也可以把这个词放在透明的地方。

.card {
background-color: transparent; }