使用Javascript扩展背景 [英] Extending a background using Javascript
问题描述
我有一个像这样的页面
-----------------------------------
| ************* |
| ************* |
| ************* |
| ************* |
| ************* |
| ************* |
-----------------------------------
外框架是浏览器边框，因此是< body> < body> 元素上的中心背景图像。
The outer frame is the browser edge and thus the <body>, and the stars are a centred background image on the <body> element.
现在，使用javascript我想添加
Now, using javascript I'd like to add some aboslutely positioned DIVs each side of that background in order to extend it:
-----------------------------------
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
-----------------------------------
当窗口被调整大小时，居中的背景将移动（保留在窗口的中心），所以每一侧的div都会移动。
As the window is resized the centred background will move (to remain in the center of the window), so the divs on each side should move in consequence.
任何人都可以建议一种方法来解决这个问题？
Can anyone please suggest an approach to solving this issue?
：
背景是大图片，我想通过翻转它在屏幕上重复，如下所示：
The background is large image, and I wish to have it repeated across the screen by flipping it as described here:
这个问题讨论了翻转的实际过程，而这个问题涉及定位的CSS / Javascript方面。
The actual process of flipping was discussed in that question, whereas this question deals with the CSS/Javascript aspect of positioning.
请注意，的非功能浏览器我很高兴离开页面，因为它是在第一个图，只有中心的背景。
Note that in the case of non-capable browsers I'm happy leave the page as it is in the first diagram, with only the centred background.
推荐答案
这是我的静态CSS解决方案。它类似于 Matt的回答，但我无法让他处理翻转的图片和灵活的宽度。
Here's my static CSS solution. It's similar to Matt's answer but I couldn't get his to work with flipped images and flexible width.
到目前为止，它只在每一侧添加一个div。如果你需要更多，我可以写一些JS。网页的HTML标记为：
So far it only adds a single div on each side. If you need more, I could write some JS for that. The HTML markup of the page is:
<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扩展背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
