仅使用CSS背景设计专栏

问题描述

是否可以仅使用CSS在主体背景中设计居中列？

这是我已经做的：

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

我上面的解决方案已经可以正常使用，但是我想摆脱该外部图像，而仅使用CSS属性。

基本上我想实现这一目标：

• 彩色身体背景
• 中间是全高固定宽度的白色列

请不要建议更改HTML，因为这不是我要的内容：我想知道是否可以仅使用CSS来实现该目标。

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

>

解决方法

背景简单：

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

,

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

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

,

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

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

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