我有一个看起来像这样的页面
-----------------------------------
| ************* |
| ************* |
| ************* |
| ************* |
| ************* |
| ************* |
-----------------------------------
外框是浏览器边缘，因此是 <body> , 星星是 <body> 上居中的背景图片元素。
现在，我想使用 javascript 在该背景的每一侧添加一些绝对定位的 DIV 以扩展它:
-----------------------------------
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
|*********|*************|*********|
-----------------------------------
随着窗口大小的调整，居中的背景将移动(以保持在窗口的中心)，因此每侧的 div 也应随之移动。
任何人都可以提出解决此问题的方法吗？
关于我为什么这样做的旁注:
背景是大图，我希望按照此处描述的方式翻转它，使其在屏幕上重复显示:
Background flipped tiling using Javascript
翻转的实际过程在该问题中进行了讨论，而该问题涉及定位的 CSS/Javascript 方面。
请注意，对于不支持的浏览器，我很乐意让页面保持第一个图表中的样子，只有居中的背景。
最佳答案
使用 javascript 添加两个 DIV。比根据需要相对于屏幕中心设置它们的位置。添加一个 onresize 事件，该事件将在浏览器窗口调整大小时重新定位 DIV。
window.onresize = updateDivsPosition;
关于javascript - 使用 Javascript 扩展背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13287662/