html - 如何使用图像背景从底部 flex div

Question

是否可以使用 HTML CSS 添加 flex 的底部，这样我们就不需要像这样裁剪图像？这样做的主要目的是让图像像那样自动 flex ， 我试图添加 border-radius 但它不起作用。有帮助吗？

我认为我们需要使用 SVG？我不确定。

Answer 1

取决于您的 browser support您可以使用 clip-path 和 circle 的要求。

.clip {
  display: inline-block;
  clip-path: circle(100% at 50% -50%);
}

<div class="clip">
  <img src="https://placehold.it/500x350" alt="">
</div>

circle(100% at 50% -50%) 定义一个圆，其半径为 100%(容器宽度)，位于坐标点 x = 50% y = -50% 在容器的坐标系上。调整这些参数以满足您的需要(取决于容器和图像的实际大小)。