具有中间重复部分的多个 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;
}

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

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

Multiple CSS backgrounds with middle repeating portion

html

css

background