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

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;
}

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