重复背景属性（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;    
}

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