如何用CSS实现单页面多位置多色背景且不挤压原有页面内容

要实现你说的四角多色背景、且不挤压原有页面内容的效果，核心逻辑是让背景元素脱离正常文档流，这里提供两种常用实现方案：

方案1：多层CSS渐变实现（无额外DOM，最简单） #

直接给页面根容器（比如body）添加背景渐变即可，完全不会影响内部元素布局：

body {
  margin: 0;
  min-height: 100vh;
  /* 依次对应左上、右上、左下、右下四个色块，可自定义颜色、大小 */
  background-image: 
    radial-gradient(circle at top left, #ef4444 0%, #ef4444 18%, transparent 18%),
    radial-gradient(circle at top right, #3b82f6 0%, #3b82f6 18%, transparent 18%),
    radial-gradient(circle at bottom left, #10b981 0%, #10b981 18%, transparent 18%),
    radial-gradient(circle at bottom right, #f59e0b 0%, #f59e0b 18%, transparent 18%);
  /* 不需要背景跟随滚动的话可以删掉下面这行 */
  background-attachment: fixed;
}

你可以调整渐变中的18%数值控制色块大小，修改色值匹配你要的配色，修改at后的位置参数调整色块的摆放位置。

方案2：定位伪元素实现（灵活度更高，支持动效） #

如果后续需要给背景添加动画、调整层级更方便，可以用脱离文档流的定位元素实现，同样不会挤压内容：

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
}
/* 通用色块样式 */
body::before,
body::after,
.bg-bottom-left,
.bg-bottom-right {
  content: "";
  position: fixed;
  width: 30vw;
  height: 30vw;
  border-radius: 50%;
  z-index: -1; /* 放在所有页面内容下层 */
}
/* 左上红色块 */
body::before {
  top: -15vw;
  left: -15vw;
  background-color: #ef4444;
}
/* 右上蓝色块 */
body::after {
  top: -15vw;
  right: -15vw;
  background-color: #3b82f6;
}
/* 左下绿色块 */
.bg-bottom-left {
  bottom: -15vw;
  left: -15vw;
  background-color: #10b981;
}
/* 右下黄色块 */
.bg-bottom-right {
  bottom: -15vw;
  right: -15vw;
  background-color: #f59e0b;
}

如果不想额外加两个DOM元素，也可以把四个色块都用background-image写在同一个元素的多层渐变里。

内容的提问来源于stack exchange，提问作者user16045271