CSS 半月背景图像蒙版

Question

我真的花了很多时间试图解决这个问题，但我就是无法让它工作。我在这里建立了一个基础演示供任何人使用。

我想要的是图像在灰色背景上显示为半月。这个半月应该根据 FlexContainer 的高度缩放。检查我的两张图片，了解最终产品的外观。不用担心圆半径是否正确。

代码中的绿色背景只是为了看svg的大小，可以去掉。圆圈的边缘应始终位于屏幕中心（我的示例未正确居中）

弹性包装之前：

弹性包装后：

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>

Answer 1

如果你对另一个想法持开放态度，你可以使用 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 clip-path 的另一个想法，它可以让您获得与 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>

CSS 半月背景图像蒙版

CSS Half Moon Background Image Mask

html

css

svg

clip-path