gpt4 book ai didi

javascript - 使用 Javascript 扩展背景

转载 作者:行者123 更新时间:2023-11-28 13:27:07 25 4
gpt4 key购买 nike

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

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

外框是浏览器边缘,因此是 <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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com