CSS：将背景色设置为窗口宽度的50％

Question

试图在“分成两部分”的页面上获得背景；相对两侧的两种颜色（似乎是通过background-color在body标签上设置默认值，然后将另一种颜色应用到div可拉伸整个窗口宽度的来完成的）。我确实提出了一个解决方案，但不幸的是，该background-size属性在IE7 / 8中不起作用，这对于该项目是必不可少的-body { background: #fff; }#wrapper {    background: url(1px.png) repeat-y;    background-size: 50% auto;    width: 100%;}由于它只是纯色，也许有一种只使用常规background-color属性的方法吗？

Answer 1

实现“一分为二”背景的简单解决方案：

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

您也可以将度数用作方向

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

Answer 2

因此，这是一个非常古老的问题，已经有了公认的答案，但是我相信，如果四年前发布该答案，那就会选择它。

我用CSS完全解决了这个问题，没有其他DOM元素！这意味着这两种颜色纯粹是一种元素的背景色，而不是两种背景色。

我使用了渐变，因为我将颜色停止点设置得非常紧密，所以看起来好像颜色是鲜明的并且不会混合。

这是本机语法中的渐变：

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

颜色#74ABDD从开始，0%现在仍然#74ABDD在49.9%。

然后，我强迫渐变移至0.2%元素高度内的下一个颜色，从而在这两种颜色之间创建了一条非常实心的线条。

结果如下：