分屏中的站点容器

Question

我不知道我告诉你的这个问题。我会告诉你一个图像。

此网站容器必须为1000px。但是左侧部分的背景颜色和右侧部分的背景颜色应该显示在屏幕的末尾。但是左侧部分和右侧部分的背景颜色彼此不同。 我不想为此使用javascript。 有没有办法在css中做到这一点。

Answer 1

如果只是颜色，则可以使用多个图像或渐变。渐变需要背景大小。

html {
  background: linear-gradient(to left, gray, gray) center repeat-y, linear-gradient(to left, pink, pink) right repeat-y, linear-gradient(to left, yellow, yellow);
  background-size: 400px 1px, 50%, auto;
}
p {width:400px;margin:auto;}
/* 400px and a single tag for demo snippet*/

<p>play in full page & resize window.</p>

使用的codepen：100px宽度bg http://codepen.io/anon/pen/bdEOZE

请注意，之前的多个渐变或图像。第一个显示在最上面。