39

我有三个背景图像，宽度均为 643 像素。我希望它们像这样排列：

  • 顶部图像（12px 高度）无重复

  • 中间图像重复-y

  • 底部图像（12px 高度）无重复

如果不让它们重叠，我似乎无法做到这一点（这是一个问题，因为图像是部分透明的），这样的事情可能吗？

background-image:    url(top.png),
                     url(bottom.png),
                     url(middle.png);

background-repeat:   no-repeat,
                     no-repeat,
                     repeat-y;

background-position: left 0 top -12px,
                     left 0 bottom -12px,
                     left 0 top 0;
4

9 回答 9

51

您的问题是，repeat-y无论您最初将其放置在何处，它都会填满整个高度。因此，它与您的顶部和底部重叠。

一种解决方案是将重复背景推入位于容器12px顶部和底部的伪元素中。结果可以在这里看到（演示中的不透明度只是为了表明没有重叠发生）。没有不透明度，请参见此处。相关代码（在CSS3浏览器中测试：IE9、FF、Chrome）：

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

如果您需要或想要 IE8 支持（不支持多个背景），那么您可以将顶部背景放在主 div 中，并使用div:after位于容器底部的伪元素将底部背景放入。

于 2012-05-12T18:49:09.143 回答
6

如果您可以将填充/边框添加到等于您要定位的背景而不与其他块重叠的块中，您可以使用background-clip&background-origin将顶部和底部背景定位在填充/边框上，并将重复背景定位在内容/填充上+内容。

这是一个例子：http ://dabblet.com/gist/2668803

对于您的代码，您可能需要添加如下内容：

padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;

或者

border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;

你会得到你需要的。如果您无法获得填充/边框，那么提到的 ScottS 之类的伪元素将完美运行。

于 2012-05-12T20:41:55.177 回答
4

尝试这样做：

 background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
    }

编辑：只是一个例子，但这是你的 css 的 css：

background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
        }
于 2012-05-02T16:09:21.700 回答
1

我实际上找到了一个更简单的解决方法，因为我在水平导航中遇到了同样的问题。

而不是像其他答案一样添加代码，您只需在 CSS 中以不同的方式列出它。重复的中心图像需要最后列出，而不是第一个或第二个。

在我的代码中，它看起来像这样：

background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
于 2014-03-27T20:24:20.390 回答
1

如果：

  1. 您想将不重叠的背景应用到 ":before"
  2. ":before" 元素作为已知的最大高度
&:before {
    background: url('vertical-line.png') no-repeat 0px,
                url('vertical-line-repeat.png') no-repeat 140px,
                url('vertical-line-repeat.png') no-repeat 200px,
                url('vertical-line-repeat.png') no-repeat 260px,
                url('vertical-line-repeat.png') no-repeat 320px,
                url('vertical-line-repeat.png') no-repeat 380px,
                url('vertical-line-repeat.png') no-repeat 440px,
                url('vertical-line-repeat.png') no-repeat 500px,
                url('vertical-line-repeat.png') no-repeat 560px,
                url('vertical-line-repeat.png') no-repeat 620px,
                url('vertical-line-repeat.png') no-repeat 680px,
                url('vertical-line-repeat.png') no-repeat 740px;
}
于 2017-08-10T12:08:41.983 回答
0

这是一种对Top、Middle和Bottom图像使用 3 个 div 的方法，这些图像透明地应用于您的网页。

背景壁纸是可选的。

在现代浏览器中测试并且是 IE8 友好的。

此方法允许您按应处理的方式处理正文元素，即您的网页标记不需要位于包装器或包含元素中。

jsFiddle 示例
居中填充的 jsFiddle 示例

由于上面的示例对顶部和底部图像使用了不透明的图像占位符内容，因此您可以使用此 jsFiddle 在重复模式HERE中使用迷你透明图标来验证标记是否具有透明度。

于 2012-05-17T23:31:55.037 回答
0

我认为z-index会解决此问题，因为z-index仅影响 CHILD 元素，这意味着您不能在使用z-index.

顶部和底部图像z-index:3;

中间图像z-index:2; background-repeat:repeat-y;

于 2013-12-31T01:36:41.517 回答
0

我看到的唯一（实用的，不威胁头发的）方法是在 Javascript 中执行此操作，当页面加载时，当它被调整大小时，画布大小适合 innerHeight 和 3 个图像：绘制第一个在顶部，根据需要绘制第二个以覆盖画布的其余部分，并在画布底部绘制第三个。将画布定位在 0,0 处，z-index 为负值。

我尝试了 3 张图像（643 x 12、100 和 12），当然我看到的第一个问题是第三张图像是在第二张图像的最后一次迭代的一部分上绘制的——除非你有一个窗口高度正好是 12+12+(p2.height*X)，你会有一些重叠。但这是意料之中的，对吧？

于 2012-05-19T16:03:09.627 回答
0

to use backgroud-position with 2 arguments, must to Write in extended writing backgroud-position-x and backgroud-position-y

background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
于 2019-01-09T11:56:16.690 回答