我有两个网页,其中包含一个可滚动的div作为主要包装器,以及一个图像背景,其样式类似于
body
{
background: url("../Images/background.jpg") center bottom no-repeat;
z-index:-5;
background-size:cover;
}
当我放大或缩小时,可滚动div会更改大小,而背景不会更改。那正是我想要发生的事情。
但是,如果我放大一页,然后单击浏览器的“后退”按钮,则背景将在前一页上缩小。如果刷新页面,背景将固定,并且所有内容将再次正确显示。如果我缩放然后单击指向上一页的链接,而不是在浏览器窗口中单击回来,则该页面将正确显示。我尝试使用隐藏字段
<input type="hidden" id="refresh" value="no"/>
使用以下脚本
<script type="text/javascript">
$(window).load(function (e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
</script>
在首次加载页面后一次重新加载页面,希望背景会调整大小,但不会。仅单击浏览器刷新按钮即可修复它。关于如何处理此问题的任何建议将非常有帮助。
最佳答案
使用$(window).resize()
评分器而不是$(window).load()`,如果问题是缩放或调整大小可能会有所帮助