如何使用 CSS 设置仅在图像的一侧隐藏溢出并同时保持响应？

Question

我有一张图片，我需要在它后面设置一个彩色的圆形背景，同时只在图片的底部隐藏溢出。图像为矩形，背景为圆形。我已经阅读了所有类似的文章，但是因为它需要是圆形背景我找不到解决方案。我试图用以下方法解决它：

溢出：隐藏
z-index
剪辑路径

这就是我在上面努力实现的目标

这是简化的代码：

.container {
  margin: 0 auto;
  width: 420px;
  max-width: 500px;
  height: 420px;
  background-color: red;
  border-radius: 50%;
  text-align: center;
}

<div class="container">
  <img src="https://via.placeholder.com/300x400" />
<div>

感谢任何帮助。

Answer 1

不要把容器做成一个圆，把它画成背景，然后只在底部加上半径：

.container {
  margin: 0 auto;
  width: 420px;
  max-width: 500px;
  height: 420px;
  background:radial-gradient(circle closest-side,red 98%,#0000);
  border-radius: 0 0 50% 50%;
  overflow:hidden;
  text-align:center;
}

<div class="container">
  <img src="https://via.placeholder.com/300x400" />
<div>

如何使用 CSS 设置仅在图像的一侧隐藏溢出并同时保持响应？

How to set overflow hidden only on one side of the image with CSS and keep it responsive at the same time?

html

css

overflow

clip-path