div能否设置半图半纯色背景？编写CSS代码后无背景显示求助

当然可以实现这种效果！你的代码里有两个关键问题导致背景没正常显示：

1. 语法错误：background:blue: 末尾用了冒号:而不是分号;，这会让整个CSS规则解析出错
2. 属性覆盖：你连续写了两次background属性，后面的background: url(tin.jpg) repeat-y;会完全覆盖前面的蓝色背景设置，所以蓝色根本不会生效

下面给你两种可靠的实现方案：

方案1：使用CSS多背景属性 #

这是最简洁的方法，直接在同一个元素上同时设置背景色和背景图，通过background-size和background-position控制图片只占一半区域：

#example1 {
  /* 先设置背景色，作为兜底 */
  background-color: blue;
  /* 设置背景图，指定重复方式、位置和尺寸 */
  background-image: url(tin.jpg);
  background-repeat: repeat-y;
  background-size: 50% auto;
  background-position: left top; /* 图片靠左，右侧自动填充蓝色 */
  width: 100%;
  height: 400px;
  padding: 15px;
}

也可以用简写形式合并属性：

#example1 {
  background: blue url(tin.jpg) repeat-y left top / 50% auto;
  width: 100%;
  height: 400px;
  padding: 15px;
}

如果想要图片在右侧，只需要把background-position改成right top即可。

方案2：使用伪元素（更灵活的控制） #

如果需要对背景图做更复杂的定位、叠加或者不希望影响元素的背景属性，可以用伪元素模拟一半背景：

#example1 {
  position: relative;
  /* 直接设置纯色背景 */
  background-color: blue;
  width: 100%;
  height: 400px;
  padding: 15px;
}

#example1::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  /* 伪元素上设置背景图 */
  background-image: url(tin.jpg);
  background-repeat: repeat-y;
  background-size: cover; /* 根据需求调整，也可以用auto */
  z-index: -1; /* 确保伪元素在内容下方，不遮挡文字 */
}

这种方法的优势是可以单独调整伪元素的位置（比如改成right:0让图片在右侧）、添加阴影、透明度等效果，完全不干扰主元素的样式。

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