如何在 css 的一页中创建不同位置的背景

Question

如何在不下推html的内容的情况下，使用css创建如下图所示的四种不同颜色和四种不同位置的背景？

Answer 1

您可以使用linear-gradient在不同的点创建不同的颜色。但是，这不会按照您希望的方式直接工作，因为线性渐变仅在一个方向上工作。因此，我们必须为左右 50% 创建伪元素：

body {
  position: relative;
}

/* for the left 50% of the background */
body::before {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, green 0 25%, white 25% 50%, #50A9B2 50% 75%, white 75% 100%);
  z-index: -1;
}

/* for the right 50% of the background */
body::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  background: linear-gradient(to bottom, white 0 25%, purple 25% 50%, white 50% 75%, orange 75% 100%);
  z-index: -1;
}


/* for styling purpose only */
body {
  min-height: 100vh;
  margin: 0; 
}

Answer 2

CSS 中的背景图像允许您拥有多个图像并调整它们的大小并单独放置它们。

linear-gradient(acolor,acolor) 会给你一个颜色块。

所以将这些想法放在一起这个片段只是将 4 种颜色（线性渐变）定位在视口中作为示例。由于它们是背景，因此不会影响任何元素的定位。

html {
  width: 100vw;
  height: 100vh;
  background-image: linear-gradient(green, green), linear-gradient(magenta, magenta), linear-gradient(teal, teal), linear-gradient(orange, orange);
  background-size: 50% 25%;
  background-position: left top, right 33.333333%, left 66.666666%, right bottom;
  background-repeat: no-repeat;
}

如何在 css 的一页中创建不同位置的背景

How to create different position background in one page in css

html

css

background