html - 我如何在背景中设置图像，我使用 CSS 将图像放在背景中，但遗憾的是上部曲线显示正确但图像底部显示平坦-6ren

html - 我如何在背景中设置图像，我使用 CSS 将图像放在背景中，但遗憾的是上部曲线显示正确但图像底部显示平坦

转载作者：太空宇宙更新时间：2023-11-04 05:38:35

.bg-pink{
          background-image:url(/image/eF8tF.png);
          background-size: cover;
          margin-bottom: 44px;
          background-position: top;
        }

<body>
      <!-- Top content -->
      <div class="top-content">
         <div class="container-fluid">
            <div class="row bg-pink">
                <div class="col-md-12">
                  <div class="jumbotron text-center">
                    <h1 class="display-3">Thank You!</h1>
                    <p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>
                    <hr>
                    <p class="lead">
                      <a class="btn btn-success" href="#" role="button">Continue</a>
                    </p>
                  </div>
                </div>
            </div>
         </div>
      </div>
   </body>

我看到这种类型的背景图像，但是 1

我想要第二个像底部一样的形状 2

我使用这个 HTML 和 CSS ...请检查图像，我也尝试使用 background-size: cover;和最小高度和填充，但我没有得到底部形状。

最佳答案

这应该有效。但我建议在以高分辨率显示时使用更高分辨率的图像。

我更新了背景大小和背景重复。

.bg-pink{
    background-image: url(/image/eF8tF.png);
    background-size: 100% 100%;
    margin-bottom: 44px;
    background-position: top;
    background-repeat: no-repeat;
}

<body>
      <!-- Top content -->
      <div class="top-content">
         <div class="container-fluid">
            <div class="row bg-pink">
                <div class="col-md-12">
                  <div class="jumbotron text-center">
                    <h1 class="display-3">Thank You!</h1>
                    <p class="lead"><strong>Please check your email</strong> for further instructions on how to complete your account setup.</p>
                    <hr>
                    <p class="lead">
                      <a class="btn btn-success" href="#" role="button">Continue</a>
                    </p>
                  </div>
                </div>
            </div>
         </div>
      </div>
   </body>