css - 重复背景属性（repeat-x）

Question

我希望我能解释我需要做什么。解释见附图。如果您查看图像，您会看到 1/2 月亮透明切割。图像是动态的，并且根据用户的分辨率滚动不同，所以我不能只制作带有切口的图像......我想要做的是以下内容：

向左高约 22px 的实心白条 (repeat-x)，然后将剪切的半月形图像居中，然后在右侧高约 22px 的另一个实心白条 (repeat-x)。我可以使用中心和边距轻松将切口半月置于正确位置以移动到位置......问题是得到实心白色条，因此它具有所附图片中的外观。

任何帮助是极大的赞赏！也许我做错了，有更好的解决方案吗？

Answer 1

你可以用这个 CSS 来做到这一点：

.test1 {
    background-image: radial-gradient(20px 10px ellipse at top, transparent 99%, white 100%);
    background-size: 100% 17px;
    background-repeat: no-repeat;    
}

它在白色背景上创建一个居中的透明椭圆。