在HTML和CSS中创建带有背景图像的弯曲布局[已关闭]

nkhmeac6  于 2023-07-01  发布在  其他
关注(0)|答案(1)|浏览(109)

**关闭。**此题需要debugging details。目前不接受答复。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将帮助其他人回答这个问题。
2天前关闭。
Improve this question
我在这件事上纠结了一段时间,但不知怎么的,我没有得到确切的结果。我试图创建this layout,但我总是被右边的曲率卡住,无法显示它后面的图像。有人能好心地指导我如何才能实现这个确切的布局,请?

zzlelutf

zzlelutf1#

您可以使用以下代码实现以下布局:https://codepen.io/shalinigandhi/pen/rNQydZR

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --border-radius: 50px;
  --height: 100px;
}

.banner-container {
  width: 100%;
  height: var(--height);
  border-bottom-left-radius: var(--border-radius);
  overflow: hidden;
}

.banner {
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.content-container {
  position: relative;
  width: 100%;
  min-height: var(--height);
  border-top-right-radius: var(--border-radius);
  background: #fff;
  padding: 20px 50px;
}

.content-container:before {
  position: absolute;
  content: '';
  right: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: var(--height);
  background-image: url(https://i.imgur.com/pBMGV2m.jpeg);
  background-position: 0px calc(var(--height) * -1);
  background-size: cover;
  background-repeat: no-repeat;
}
<div class="page-container">
  <div class="banner-container">
    <img class="banner" src="https://i.imgur.com/pBMGV2m.jpeg" alt="Image">
  </div>
  <div class="content-container">
    <p>Curved Banner Layout</p>
  </div>
</div>

相关问题