如何将背景水平分块：一侧黑色，一侧粉紫渐变？

你之前的代码是垂直上下分栏（用了to bottom），要改成水平左右分栏，同时把一侧换成粉紫渐变，只需要调整渐变方向和颜色停止点即可，以下是两种可行方案：

方案1：单线性渐变快速实现 #

直接在一个渐变里定义分段颜色，左半部分是粉到紫的渐变，右半部分固定黑色：

body {
  height: 100vh; /* 占满当前视口高度，按需调整 */
  margin: 0; /* 清除浏览器默认边距 */
  background: linear-gradient(to right, #ff6b9d 0%, #d808a4 50%, black 50%, black 100%);
}

关键说明： #

• to right：设置渐变方向为水平从左到右，替代你之前的垂直方向
• #ff6b9d 0% → #d808a4 50%：左半50%宽度实现粉色到紫色的平滑渐变
• black 50% → black 100%：右半50%宽度保持纯黑色，两个50%的停止点确保分界清晰无过渡

方案2：双渐变叠加（更易维护） #

如果需要单独调整某一侧的样式，用两个独立渐变叠加更直观：

body {
  height: 100vh;
  margin: 0;
  background-image: 
    linear-gradient(to right, #ff6b9d, #d808a4), /* 左侧粉紫渐变 */
    linear-gradient(black, black); /* 右侧黑色背景 */
  background-position: left, right; /* 分别定位左右 */
  background-size: 50% 100%; /* 每个背景占50%宽度、100%高度 */
  background-repeat: no-repeat; /* 禁止背景重复 */
}

两种方案都能实现你示例图中的效果，按需选择即可。

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