html - 如何使用 css 在外部创建这种类型的带有半图像的卡片

Question

如何使用 css 创建这种类型的卡片。

标签： htmlcssbootstrap-4

Answer 1

纯 CSS 解决您的问题：

img您可以随意更改

运行下面的代码片段

#parent {
  position: relative;
  height: 250px;
  width: 300px;
}

img {
  height: auto;
  width: 200px;
  position: absolute;
  bottom: 0;
  right: 0;
}

#box {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: #75d6e9;
  bottom: 0;
  border-radius: 20px;
  display: flex;
  align-items: center;
}

#box p {
  margin-left: 25px;
  font-size: 25px;
  font-family: sans-serif;
  font-weight: bold;
  color: #FFF;
}

<div id="parent">
  <div id="box">
    <p>Fashion</p>
  </div>
  <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fpngimg.com%2Fuploads%2Fthinking_woman%2Fthinking_woman_PNG11638.png&f=1&nofb=1" alt="">
</div>

希望它能让您了解它是如何工作的。

可以通过使其具有响应性来改进它，但这不是问题的重点。