css - 如何使用CSS实现如图所示的简单背景效果？

Question

<分区>

Answer 1

实现此目的的一种方法是对元素的 background 使用 linear-gradient。

像这样:

background: linear-gradient(to bottom, #49565f, #49565f 50%, #fff 50%, #fff);

您可以看到这个 here 的演示.

更新

如果您想限制第一个条纹的大小，使其不总是 50%，您可以设置 background-size: 100% Xpx(Xpx 是您想要的高度)然后设置 background-repeat: no-repeat; 所以它不会重复。

查看此 here 的演示.