使用Javascript扩展背景

我有一个页面看起来像这样

-----------------------------------
|          *************          |          
|          *************          |          
|          *************          |          
|          *************          |          
|          *************          |          
|          *************          |
-----------------------------------

外部框架是浏览器边缘，因此是

，星星是

元素上居中的背景图像

现在，我想使用javascript在背景的每一侧添加一些位置不一致的div，以扩展它：

-----------------------------------
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|          
|*********|*************|*********|
-----------------------------------

当窗口调整大小时，居中的背景将移动（保持在窗口的中心），因此每侧的div都会随之移动

有人能提出解决这个问题的方法吗

关于我为什么这样做的旁注：

背景是大图像，我希望通过如下所述翻转它，在屏幕上重复它：

这个问题讨论了翻转的实际过程，而这个问题涉及定位的CSS/Javascript方面

---

请注意，对于没有功能的浏览器，我很乐意让页面保持第一个图表中的状态，只使用居中的背景。

使用javascript添加两个div。然后根据需要设置它们相对于屏幕中心的位置。然后添加onresize事件，该事件将在调整浏览器窗口大小时重新定位div

window.onresize = updateDivsPosition;

---

您可以尝试使用定位的纯css解决方案。我假设您在页面的中心有一个固定大小的图像。比如说，假设你的图像是800px宽，那么

• 用左0px、右50%定位左div，并添加右边距 400像素
• 用左50%、右0px定位右div并添加一个 400px的左边缘

示例：

（注意，对于较小的JSFIDLE窗口，我假设图像宽度为256px）

CSS:

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 128px; /* image width / 2 */
    background-color:#ccc;
}    

#right {
    position:absolute;
    left:50%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 128px; /* Image width / 2 */
    background-color:#ccc;  
}

<div id="left">Left</div>
<div id="right">Right</div>​

body, .bgImage {
    background-image: url('http://flickholdr.com/640/1280/5');
}

.flip {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

body {
 background-position: top center;     
}

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 320px; /* image width / 2 */
    background-position:top left;    
}


#right {
    position:absolute;
    left:49.99%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 320px; /* Image width / 2 */
    background-position:top right;
}

​HTML:

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 128px; /* image width / 2 */
    background-color:#ccc;
}    

#right {
    position:absolute;
    left:50%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 128px; /* Image width / 2 */
    background-color:#ccc;  
}

<div id="left">Left</div>
<div id="right">Right</div>​

body, .bgImage {
    background-image: url('http://flickholdr.com/640/1280/5');
}

.flip {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

body {
 background-position: top center;     
}

#left {
    position:absolute;
    left:0px;
    right:50%;
    top:0px;
    bottom:0px;
    margin-right: 320px; /* image width / 2 */
    background-position:top left;    
}


#right {
    position:absolute;
    left:49.99%;
    right:0px;
    top:0px;
    bottom:0px;
    margin-left: 320px; /* Image width / 2 */
    background-position:top right;
}

HTML:​

<div id="left" class="bgImage flip"></div>
<div id="right" class="bgImage flip"></div>​

---

这是我的静态CSS解决方案。这与类似，但我无法让他处理翻转的图像和灵活的宽度

到目前为止，它只在每一侧添加一个div。如果您需要更多，我可以为此编写一些JS。页面的HTML标记为：

<div class="content">
    <div class="left-background"></div>
    <div class="right-background"></div>
    content
</div>

---

中间的div的宽度是多少？它是固定宽度还是百分比宽度？目前它不是div，背景图像位于body元素上。如果有必要，我可以更改……您是否使用任何公共库？jQuery，YUI，Closure…？现在不行。如果我使用一个工具，那么我最了解Mootools，但我对任何事情都持开放态度。我确信我可以使用一些强力javascript来创建div并在页面上重新定位它们，但我担心性能。我有一种感觉，有一种更优雅的解决方案…@tarmes:adding2div，或者任何使用JS的div都不是蛮力的东西。。。即便如此，如果您担心这样做会影响性能，请避开libs：它们的执行速度总是比编写良好的定制JS慢，而定制JS只做您需要的事情，当您需要时为什么不编写

window.onresize=updateDivsPosition

？为什么要使用jQuery添加2个div？如果这就是您在DOM操作方面所要做的一切，那么jQuery完全是过火了