无法将透明背景应用于子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具有白色，但是我不能修改类{{1 }}，因为我会失去主体控件的颜色。

This is a test fiddle为您准备就绪。

这实际上是结果：

基本上，card应该具有header的绿色。

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; }