Question

我正在尝试制作一个看起来像这样的网站

您可以看到我的黄色背景和旋转木马之间有白色背景。反正有没有办法让我的卡座后面的背景不是白色，而是轮播呢？

HTML

<div class="row-lg" id="backcolor">
  <div class="card-deck mx-auto" id="card-deck">
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody1">
        <h5 class="card-title" id="cardtitle1">Card 1</h5>
        <p class="card-text" id="cardtext1">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody2">
        <h5 class="card-title" id="cardtitle2">Card 1</h5>
        <p class="card-text" id="cardtext2">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody3">
        <h5 class="card-title" id="cardtitle3">Card 1</h5>
        <p class="card-text" id="cardtext3">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody4">
        <h5 class="card-title" id="cardtitle4">Card 1</h5>
        <p class="card-text" id="cardtext4">Card text 1</p>
      </div>
    </div>
    <div class="card">
      <img src="dummy.jpg" alt="dummy" class="card-img-top">
      <div class="card-body" id="cardbody5">
        <h5 class="card-title" id="cardtitle5">Card 1</h5>
        <p class="card-text" id="cardtext5">Card text 1</p>
      </div>
    </div>
  </div>
</div>

CSS

#card-deck {
  padding-top: 190px;
  height: 450px;
  width: 1200px;
  margin: 0 auto;
}

#card-deck .card {
  padding-left: 20px;
  padding-right: 20px;
  max-width: 300px;
  text-align: center;
}

#card-deck .card h5 {
  color: orange;
}

Answer 1

编辑：我们需要使您的卡片容器浮在两个元素上，因为为卡片元素设置background-color会覆盖它下面的背景。

为此，我们需要修改＃card-deck

position:relative，因此我们可以根据其父div调整其位置
添加top:30px;以将其定位在其初始位置下方30px
删除高度和填充属性，因为我们将依赖卡片的高度
添加z-index:1以将其放置在其他元素上

将此CSS用于#card-deck

#card-deck {
  width: 1200px;
  margin: 0 auto;
  position:relative;
  top:30px;
  z-index:1;
}

这是更新的小提琴； https://jsfiddle.net/8y4ojb5t/

Answer 2

这是因为您忘记了#至background-color。

您的CSS：

#backcolor{
    background-color: F1F0F0;
}

使用此：

#backcolor{
    background-color: #F1F0F0;
}

由于container-fluid左右的空白，您的图像正在剪切。因此，您必须删除该填充。

尝试使用此CSS：

 .container-fluid{
         padding-left: 0;
         padding-right: 0;
    }

如何使卡片组和传送带重叠

2 个答案: