Question

我正在尝试在具有顶部，中间重复部分和底部的单个div上使用多个背景图像。问题是重复部分在整个div中重复。

是否有人知道将重复背景图像限制为div的特定部分的技术？如果这不可行，您是否知道是否可以将background_middle_repeating.png背景图像推到顶部和底部背景图像后面？

CSS

div {
  background:
    url(../images/background_top.png) no-repeat 50% 0%,
    url(../images/background_middle_repeating.png) repeat-y 50% 100px,
    url(../images/background_bottom.png) no-repeat 50% 100%;
}

感谢。

Answer 1

Background layers are created in the order they are specified，自上而下;考虑到这一点，推动顶层和底层后面的中间层，最后声明：

div {
  background:
    url(../images/background_top.png) no-repeat 50% 0%,
    url(../images/background_bottom.png) no-repeat 50% 100%,
    url(../images/background_middle_repeating.png) repeat-y 50% 100px;
}

但请注意，如果顶部和底部图像的某些部分是透明的，则会导致中间图像透过这些透明部分显示。在这种情况下，您需要找到一种不同的方法来通过其他方式限制中间背景图像的区域。根据您的布局，这可能就像使用图像编辑器填充这些透明区域一样简单，或者这可能需要使用伪元素或将顶部和底部图像分配给不同的元素。

具有中间重复部分的多个CSS背景

1 个答案: