1

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

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

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

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

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

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

任何人都可以提出解决此问题的方法吗？

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

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

使用 Javascript 进行背景翻转平铺

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

请注意，在浏览器不支持的情况下，我很乐意将页面保留在第一个图中，只有居中的背景。

4

3 回答 3

1

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

window.onresize = updateDivsPosition;
于 2012-11-08T11:16:57.657 回答
1

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

  • 将左侧 div 定位为左侧 0px，右侧 50%，并添加 400px 的右边距
  • 将右侧 div 定位为左侧 50%，右侧 0px，并添加 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;  
}

​<strong>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： ​</p> 

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

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

[ ] = full image

{ } = flipped image

create an image that looks like

}[ ]{
于 2012-11-08T11:24:42.550 回答
0

这是我的静态 CSS 解决方案。这与马特的回答类似，但我无法让他使用翻转的图像和灵活的宽度。

演示在这里。

到目前为止，它只在每一侧添加了一个 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;
}
于 2012-11-08T12:12:52.983 回答