CSS 半月背景图像蒙版答案

【问题标题】：CSS Half Moon Background Image MaskCSS 半月背景图像蒙版
【发布时间】：2018-08-05 21:53:58
【问题描述】：

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

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

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

在 flex wrap 之前：

flex wrap 之后：

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>

【问题讨论】：

标签： html css svg clip-path

【解决方案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 剪辑路径的想法，它可以让您获得与 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>

【讨论】：

感谢您的回答！我不介意使用它，它实际上比 svg 方法容易得多。唯一的小问题是边框在大窗口上变得非常模糊。知道如何消除这种影响吗？如果没有模糊，这将是 100% 正确的！
@Frank 调整 % 值...将第二个值设为 50% 而不是 51% ...与它们一起玩直到你想要你想要的 ;)
好吧，我玩过它们，但它们看起来仍然很模糊，嘿，即使是 0 或 50%。当我的意思是相当模糊时，我的意思是它们并不完全是一条实线。一些像素是模糊的（可见量很小），你知道这看起来不太好。不如 svg 清晰
@Frank 肯定它不像 SVG :) 一个想法是尝试找到足够的值，您也可以考虑使用媒体查询来更改不同大小的值...... ti 比 SVG 更容易但 svg 对这种事情仍然更精确；）
嗯，你的答案肯定有效，谢谢你，但你不知道如何在 svg 中修复它？ XD