多个背景彼此重叠(普通,拉伸,普通) [英] Multiple backgrounds on top of each other (Normal, Stretched, Normal)
问题描述
自从我面对问题对于不同分辨率的内容,背景图像太短了,我试图将背景分成3个部分,并自动拉伸中间部分,以相应地填充顶部和底部图像之间的空间.不幸的是,我没有设法在CSS中实现这一点.究竟该怎么做?
Since I faced an issue with the background image beeing too short for the content at different resolutions, I tried to split the background into 3 parts and stretching the middle one automatically to fill the space between the top and bottom image accordingly. Unfortunately I didn't manage to realize this in CSS. How to do this exactly?
content_background_top.png:1024 x 68px
content_background_middle.png:1024 x 6像素(拉伸)
content_background_bottom.png:1024 x 71px
content_background_top.png: 1024 x 68px
content_background_middle.png: 1024 x 6px (Stretched)
content_background_bottom.png: 1024 x 71px
类似这样的东西:
#content{
width: 1024px;
height: 950px;
text-align: center;
padding: 35px 0 35px 0;
background: url(img/content_background_top.png), url(img/content_background_middle.png), url(img/content_background_bottom.png);
background-repeat: no-repeat;
background-size: 1024px 68px, 1024px auto, 1024px 71px;
}
推荐答案
您需要指定背景位置和背景尺寸.另外请注意,您需要最后列出较大的中间"背景,以免覆盖其他背景.
You'll need to specify the background-positions and background sizes. Also note that you'll need to list your larger "middle" background last so that it doesn't cover the others.
#content {
width: 1024px;
height: 950px;
text-align: center;
padding-top: 35px;
background: url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1), url(http://i.stack.imgur.com/vNQ2g.png?s=128&g=1);
background-repeat: no-repeat;
background-position: 0% 0%, 0% 100%, 0% 50%;
background-size: 100px, 100px, cover;
}
<div id="content"></div>
这篇关于多个背景彼此重叠(普通,拉伸,普通)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!