如何使用 css3 或 svg 弯曲背景图像的一部分？答案

【问题标题】：how to curve a part of a backgroud image using css3 or svg?如何使用 css3 或 svg 弯曲背景图像的一部分？
【发布时间】：2017-08-23 05:51:15
【问题描述】：

当您看到图像时，您会看到带有背景的曲线。我使用svg 创建曲线，但它是纯色。谁能解释一下我如何使用图像作为背景而不是像图片显示的颜色？

我想要达到的目标

我得到了什么

我的代码

.container {
  position: relative;
  width: 100%;
  height: 400px;
  background: #333;
  bottom: 0;
}

#svg {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  bottom: -78px;
  z-index: 1000;
}

<div class="container">
  <svg id="svg">
        <path d="M0 0 C50 20 50 80 100 82 C150 80 150 20 200 0" stroke="none" fill="#333"></path>
    </svg>
</div>
<div class="container" style="background: grey; margin-top: -20px"></div>

【问题讨论】：

标签： html css svg curve

【解决方案1】：

将图像放入 SVG（作为 <image>）并使用路径为此创建 <clipPath> 或 <mask>。

或者，您可以通过将图像设置为 <pattern> 并将其用于路径填充来实现。

在本网站和网络上有许多关于如何实施所有这些解决方案的示例。

【讨论】：

【解决方案2】：

我不完全确定您想要实现什么，但我会假设您正在尝试将图像变成一个圆圈。为此，将图像放入class，然后使用border-radius 标签。 50% 是圆形，25% 是椭圆形，等等。

【讨论】：