偏移背景图片

Question

如何偏移背景图像，使背景仅从父容器顶部显示图像的下半部分，而图像的另一上半部分被隐藏，就像应用了“overflow：hidden”命令一样到它。

我知道可以通过背景位置来完成，但是如何实现？

.container{
    background-image: url(./images/bg-pattern-circles.svg);
    background-repeat: no-repeat;
    background-position: center top;
    padding: 10rem 2.5rem 8rem;
    position: relative;
    border-radius: 0 7rem 0 7rem;
    width: 100%;
    text-align: center;
    color: hsl(0, 0%, 100%);
    line-height: 1.5;
}

.container::before{
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(hsl(237, 17%, 21%), hsl(237, 23%, 32%));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
}

<div class="container">
  <h3>State of the Art Infrastructure</h3>
  <p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. This ensures your site will load instantly, no matter where your readers are, keeping your site competitive.</p>
</div>

这是我想要实现的目标（背景中的圆圈）的。这是背景中圆圈的 。

Answer 1

一种方法是这样的：

background-position: center -509px;

这是一个演示：

.container{
    background-image: url(https://i.stack.imgur.com/AphEq.png);
    background-repeat: no-repeat;
    background-position: center -509px;
    padding: 10rem 2.5rem 8rem;
    position: relative;
    border-radius: 0 7rem 0 7rem;
    width: 100%;
    text-align: center;
    color: hsl(0, 0%, 100%);
    line-height: 1.5;
}

.container::before{
    content: '';
    width: 100%;
    height: 100%;
    background-image: linear-gradient(hsl(237, 17%, 21%), hsl(237, 23%, 32%));
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    border-radius: inherit;
}

<div class="container">
  <h3>State of the Art Infrastructure</h3>
  <p>With reliability and speed in mind, worldwide data centers provide the backbone for ultra-fast connectivity. This ensures your site will load instantly, no matter where your readers are, keeping your site competitive.</p>
</div>