时间戳

首页 > 解决方案 > 如何在背景中设置图像，我使用 CSS 将图像放在背景中，但遗憾的是上曲线显示在右侧，但图像底部显示平坦

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

问题描述

.bg-pink{
          background-image:url(https://i.stack.imgur.com/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; 和最小高度和填充，但我没有得到底部形状。

标签： htmlcssbootstrap-4

解决方案

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

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

.bg-pink{
    background-image: url(https://i.stack.imgur.com/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>

推荐阅读