Question

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

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

外框是浏览器边缘，因此是<body>，而星星是<body>元素上的居中背景图像。

现在，使用javascript我想在该背景的每一侧添加一些非常定位的DIV以扩展它：

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

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

有人可以建议一种方法来解决这个问题吗？

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

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

Background flipped tiling using Javascript

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

请注意，对于无能力的浏览器，我很高兴离开页面，因为它在第一个图表中，只有居中的背景。

Answer 1

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

window.onresize = updateDivsPosition;

Answer 2

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

将左侧div放置在左侧0px，右侧50％并添加右侧边距 400px
将右侧div放置在左侧50％，右侧0px并添加a 左边距400px

示例： http://jsfiddle.net/F4kay/

（请注意，对于较小的jsfiddle窗口，我假设图像宽度较小，为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;  
}

<强> HTML：

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

至于这些div的高度，取决于你如何处理这个，无论是上/下：0px还是固定/百分比高度。在示例中，我使用了顶部0px和底部0px。

诀窍是基本上添加2个div，一个占据屏幕的左半部分，另一个占据右侧。您可以在内部div边缘添加边距以显示内部内容。我假设一个固定的宽度，但你也可以使用一半的宽度。如果你的图像用js动态变化，那只是更新边距的一种情况。

为了完整起见，我已经包含了使用这种技术的完整示例。我认为这是一个干净的解决方案。

示例： http://jsfiddle.net/Hqpyx/

<强> CSS：

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>

就个人而言，我会避免像这样翻转图像。除非你有一些限制，否则你可以编辑你的背景图像并将翻转版本的一半和一半拼接在一起，如

[ ] = full image

{ } = flipped image

create an image that looks like

}[ ]{

Answer 3

这是我的静态CSS解决方案。它与Matt's answer类似，但我无法让他使用翻转图像和灵活的宽度。

Demo here.

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

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

和CSS：

body {
    color: #dddddd;
    overflow-x: hidden;
}
@media (max-width: 400px) {
    body {
        overflow-x: visible;
    }
    .left-background, .right-background {
        display: none;
    }
}
.content, .left-background, .right-background {
    background-image: url(http://flickholdr.com/400/300/sea,sun/bw);
    height: 200px;
    width: 400px;
}
.left-background, .right-background {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";

    position: absolute;
}
.left-background {
    left: -400px;
}
.right-background {
    right: -400px;
}
.content {
    margin: 0 auto;
    position: relative;
}

使用Javascript扩展背景

3 个答案: