html - 图像与内容重叠在容器顶部

Question

在卡片顶部放置图像并在其下方放置内容的最佳方式是什么？

我尝试过负利润率，但我对这种方法没有运气。

我附上了一张我想要的外观和感觉的图片：

这是我对代码的尝试

.card {
  text-decoration: none;
  margin-right: 20px;
  text-align: center;
}

.card__section {
  overflow: hidden;
  padding-bottom: 50px;
  display: block;
  position: relative;
}

.card__inner {
  background: black;
  padding: calc(35px + 30%) 35px 35px;
  color: white;
  width: 100%;
  display: block;
  position: relative;
}

.card__image {
  width: 80%;
  height: auto;
  margin: 0 auto -30%;
  position: relative;
  z-index: 1;
}

<a href="#" class="card">
        <section class="card__section">
          <img
            class="card__image"
            src="http://via.placeholder.com/340x220"
            alt=""
          />
          <div class="card__inner">
            <h1>
              This is a static template, there is no bundler or bundling
              involved!
            </h1>
          </div>
        </section>
      </a>

标签： htmlcsslayout

Answer 1

你需要在css下面添加

.card__section {
  overflow: visible;
}
.card__image {
  margin-bottom: 20px;
  margin-top: -100px;
}
section.card__section {
    margin-top: 60px;
}

并将您的图像放入card__innerdiv

见https://codesandbox.io/s/card-hover-5n0yf?file=/index.html:450-461

希望这可以帮助