多个背景在彼此的顶部（正常，Streched，正常） [英] Multiple backgrounds on top of each other (Normal, Streched, Normal)

问题描述

您好
因为我遇到了问题< a>对于不同分辨率的内容，背景图像beeing太短，我试图将背景分成3部分，并拉伸中间一个自动填充上下图像之间的空间。不幸的是我没有设法在CSS中实现这一点。是否有人知道如何做到这一点？

Hi
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 streching 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. Does anybody have an idea of how to do this exactly?

content_background_top.png：1024 x 68px

content_background_middle.png：1024 x 6px（Streched ）

content_background_bottom.png：1024 x 71px

content_background_top.png: 1024 x 68px
content_background_middle.png: 1024 x 6px (Streched)
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>

这篇关于多个背景在彼此的顶部（正常，Streched，正常）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！