html - 无法将透明背景应用于子 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>
    

这就是主题的作者创建卡片的方式。现在，我想让 card 的 header 透明，这样我就可以看到背景的颜色。

我尝试将 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>