我真的花了很多时间试图解决这个问题，但我就是无法让它发挥作用。我在这里构建了一个基础演示供任何人使用。
我想要发生的是图像应该在灰色背景上显示为半月。这个半月应该根据 FlexContainer 的高度缩放。检查我的两张图片，了解最终产品的外观。不用担心圆半径是否正确。
代码中的绿色背景只是为了看svg的大小，可以去掉。圆圈的边缘应始终位于屏幕中心(我的示例未正确居中)
在 flex 包装之前:
flex 包裹后:
body {
margin: 0px;
}
.FlexContainer {
display: flex;
flex-wrap: wrap;
background-color: gray;
width: 100%;
justify-content: center;
box-sizing: border-box;
}
.FlexItem {
height: 200px;
width: 300px;
background-color: white;
opacity: 0.5;
margin: 10px;
}<body>
<svg style="background-color:green" style="width:100%; height:100%">
<clipPath id="circleView">
<circle cx="200" cy="200" r="200"/>
</clipPath>
<image width="100%" height="100%" xlink:href="https://imgur.com/KqppSIN.jpg" clip-path="url(#circleView)"/>
</svg>
<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>
</body>最佳答案
如果你对另一个想法持开放态度，你可以使用 radial-gradient 这比 svg 更容易(当然 svg 的渲染稍微好一点)
body {
margin: 0px;
}
.FlexContainer {
display: flex;
flex-wrap: wrap;
background-color: gray;
width: 100%;
justify-content: center;
box-sizing: border-box;
background: radial-gradient(circle at right, transparent 50%, gray 50.5%), url("https://imgur.com/KqppSIN.jpg") center/cover;
}
.FlexItem {
height: 200px;
width: 300px;
background-color: white;
opacity: 0.5;
margin: 10px;
}<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>这是 CSS 剪辑路径的另一个想法，它可以让您获得与 svg 相同的结果，但您需要注意 browser support :
body {
margin: 0px;
}
.FlexContainer {
display: flex;
flex-wrap: wrap;
background-color: gray;
width: 100%;
justify-content: center;
box-sizing: border-box;
position:relative;
}
.FlexContainer:before {
content:"";
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
background:url(https://imgur.com/KqppSIN.jpg) center/cover no-repeat;
-webkit-clip-path: circle(70.0% at 100% 50%);
clip-path: circle(70.0% at 100% 50%);
}
.FlexItem {
height: 200px;
width: 300px;
background-color: white;
opacity: 0.5;
margin: 10px;
}<div class="FlexContainer">
<div class="FlexItem"></div>
<div class="FlexItem"></div>
</div>关于html - CSS半月背景图像 mask ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48988555/