多个背景图像定位

我有三个背景图像，全部宽度为643px。我希望他们能够设置出像这样：多个背景图像定位

顶部图像（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;

来源

2012-05-02 Juddling

你的问题是，无论你最初的位置在哪里，repeat-y都会填满整个身高。因此，它与您的顶部和底部重叠。

一个解决方案是将重复背景推到位于容器顶部和底部的12px以外的伪元素。 The result can be seen here（演示中的不透明度仅表示没有重叠）。没有不透明度，see here。相关的代码（在CSS3的浏览器测试：IE9，FF，铬）：

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的顶部背景，并使用位于容器底部的伪元素将底部背景放入。

来源

2012-05-12 18:49:09 ScottS

尝试做这样的：

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-02 16:09:21

图像重叠 – Juddling

并与编辑，背景图像不显示（在Chrome中） – Juddling

请尝试在这里阅读：http://snook.ca/archives/html_and_css/multiple-bg-css-gradients它适用于跨浏览器 –

如果可以添加填充/边界的块等于要在不重叠的其它块来定位背景，则可以使用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-12 20:41:55 kizu

+ 1 - 这也适用，我总是喜欢看到其他创造性的方式来使用CSS（这是创造性的）。 – ScottS

只要**所有**都在容器div内，它就可以工作。在div下面添加网页内容时，即使不需要滚动条也会被强制。 [实施例]（http://jsfiddle.net/TdgjU/11/） – arttronics

下面是一个使用3楼div的每个顶，中东，并底部图像是透明的，适用于您的网页的方法。

背景墙纸是可选的。

在现代浏览器中测试，IE8友好。

这种方法可以让你对待体因素，因为它应及时治疗，即您的网页标记不不需要在包装或含有元素。

jsFiddle Example
jsFiddle Example with centered filled

由于上面的例子中使用的图像占位符的内容是不透明度顶部和底部的图像，你可以验证标记工作的透明度与此的jsfiddle在重复模式使用小型透明图标HERE。

来源

2012-05-17 23:31:55 arttronics

我看到的唯一（实用的，非头发威胁）的方式是在JavaScript中做到这一点，当页面已经加载，并且当它被调整大小时，用尺寸适合innerHeight和3个图像的画布：draw第一个在顶部，根据需要绘制第二个以覆盖画布的其余部分，并在画布的底部绘制第三个。将画布放置在0,0处，并带有可笑的负Z指数。

我对它有了3张图片（643 x 12,100和12），当然我看到的第一个问题是第三张图片是在第二张图片的最后一次迭代的一部分上绘制 - 除非你有一个正好12 + 12 +（p2.height * X）的窗口高度，你会有一些重叠。但是这是预期的，对吧？

来源

2012-05-19 16:03:09 dda

我认为z-index会解决这个问题，因为z-index仅影响子元素，这意味着你不能搞砸任何使用z-index页面上的其他人。

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

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

来源

2013-12-31 01:36:41 jay

我居然找到一个解决方法更为简单，因为我是有水平的导航同样的问题。

与其他答案相比，您只需在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-27 20:24:20 user2585434

一个激进而有效的方法来解决这个问题，如果：

您希望在不重叠的应用背景，一个“：前“
在 ”：前“ 元素作为已知的最大高度

&: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-10 12:08:41

多个背景图像定位

回答

相关问题