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;    
}

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