引导卡覆盖另一张卡（图像）答案

【问题标题】：Bootstrap card overlay another card (images)引导卡覆盖另一张卡（图像）
【发布时间】：2018-10-29 14:55:11
【问题描述】：

我们如何使用引导程序来实现这一点？

我认为它是带有图像叠加的卡片。

有人可以帮忙吗？

【问题讨论】：

你能分享你的代码或工作演示吗？
请展示您到目前为止所做的尝试。 "Can someone help me?" Is not a question..

标签： jquery html css twitter-bootstrap web

【解决方案1】：

检查下面的sn-p

.c {
  padding: 15px;
  margin-top: 30px;
  box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
}

.c img {
  width: 100%;
  object-fit: cover;
  border-radius: 3px;
  /* background-color: white; */
  box-shadow: 0 3px 20px 11px rgba(0, 0, 0, 0.09);
}

.c .top-sec {
  margin-top: -30px;
  margin-bottom: 15px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="card c">
        <div class="top-sec">
          <img src="http://via.placeholder.com/350x150">
        </div>
        <div class="bottom-sec">
          <p> Some data here</p>
          <p> Some data here</p>
          <p> Some data here</p>
          <p> Some data here</p>

        </div>
      </div>
    </div>
    <div class="col-8">

    </div>
  </div>

</div>

【讨论】：

【解决方案2】：

检查此页面并使用下面的 html 而不是示例中给出的 https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_cards2

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    border-radius: 5px;
    margin-top: 50px;
}

.card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

img {
    border-radius: 5px 5px 0 0;
        width: 80%;
    margin: 0 auto;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    top: -50px;
}

.container {
    padding: 2px 16px;
}
</style>
</head>
<body>

<h2></h2>

<div class="card">
  <img src="img_avatar2.png" alt="Avatar">
  <div class="container">
    <h4><b>Jane Doe</b></h4> 
    <p>Interior Designer</p> 
  </div>
</div>

</body>
</html>

【讨论】：

因为您的结果和实际问题之间存在差异。你用卡的车，卡没有重叠。
它说“我认为它是带有图像覆盖的卡片上的卡片”。这里的关键词是“思考”！！这个问题并没有说它必须是那样的。问题是“我们如何使用引导程序实现这一目标？”如果有人因为这个原因对我的回答投了反对票，最好再次检查问题！
关于 html 和 css 的好坏处在于有数百种方法可以实现相同的东西。我只是按照我认为是对的来实现的。