仅使用 CSS 背景设计专栏

Question

是否可以仅使用 CSS 在 body 背景中设计一个居中的列？

这是我已经完成的：

body {
  background-color: green;
  background-image: url(https://via.placeholder.com/500x10);
  background-position: center;
  background-repeat: repeat-y;
}

我上面的解决方案已经正常工作，但是我想摆脱那个外部图像并只使用CSS属性。

基本上我想实现这个：

彩色body背景
白色，full-height，fixed-width中间一列

请不要建议更改 HTML 因为这不是我要问的：我想知道我是否可以 仅使用 CSS.

基本上我想知道我是否可以 仅使用 CSS 背景/渐变来绘制“绿色 - 白色 (500px) - 绿色”背景（在单个 DOM 元素上） / 多个 CSS 背景.

Answer 1

您可以通过 body 标签的 :after 属性来完成此操作。通过 CSS 本身，如下所示：

body:after {
    content: " ";
    background: rgba(255,255,255,1):
    width: 100%;
    height: 100%;
    display: block;
    margin:0 auto; // centering the after DOM element
}

Answer 2

为什么不为 html 标签添加样式？它使您的问题更容易解决。此外，您不必更改任何 html 格式。

html {
  background-color: green;
  width: 100%;
  height: 100%;
}

body {
  height: 100%;
  width: 500px;
  background-color: white;
  margin: 0 auto;
}

Answer 3

轻松应对多种背景：

html {
  min-height:100%;
  background:
    linear-gradient(green 0 0) right,
    linear-gradient(green 0 0) left;
  background-size:calc(50% - 250px) 100%;
  background-repeat:no-repeat;
}

也喜欢这个：

html {
  min-height:100%;
  background:
    linear-gradient(white 0 0) center/500px 100% no-repeat
    green;
}

另一个：

html {
  min-height:100%;
  background:
    linear-gradient(90deg,
       green   calc(50% - 250px),
       white 0 calc(50% + 250px),
       green 0);
}

Box-shadow也可以在这里完成工作：

html {
  min-height:100%;
  box-shadow:
    green calc(50vw - 250px) 0 0 inset,
    green calc(250px - 50vw) 0 0 inset;
}

仅使用 CSS 背景设计专栏

Design a column using only CSS backgrounds

css

background