我做了一个脚本,重新调整我的网站的比例：“老鼠”.我做了一个缩放比例,但是这个比例创建了白色边距,所以我转换了整个html页面,并将它发送到坐标0,0的起点.
document.documentElement.style.transform = "scale(" + rat + ")";
document.documentElement.style.width = 100 / rat + "%";
document.documentElement.style.transformOrigin = '0 0';
我遇到的问题是一些具有以下属性的背景图像不会转换：
background-attachment: fixed;
每次转换我的html页面背景图像与background-attachment：fixed;不要转变
您可以在我的投资组合中查看我在说什么：
http://testedesignfranjas.tumblr.com/
在chrome和FIREFOX中打开网站,看看差异.
问题在于Firefox.
*对不起,我的英语不好
解决方法
我有部分答案.使用变换时,Firefox并不总是正确地对待嵌套的固定元素.而不是使用background-attachment,使具有image位置的div：fixed.第二个div是相对的或静态的,所以它将覆盖第一个div.
<body onload="scaleAll(0.8)">
<div id="img1">I have a background image,am scaled and am fixed.</div>
<div id="outer">
I have content and am scaled.
</div>
</body>
我把图像移动到div之外,并将img1设置为position：fixed.单独进行缩放,一次为img1,一次为具有内容的外部div.
<script>
function scale(rat,container) {
var element = document.getElementById(container);
element.style.transform = 'scale(' + rat + ')';
element.style.transformOrigin = '0 0';
}
function scaleAll(rat) {
scale(rat,"outer");
scale(rat,"img1");
}
</script>
风格使用位置：固定为img1,相对为外.
<style>
div#outer {
position: relative;
height: 900px;
width: 900px;
}
#img1 {
position: fixed;
background: url("image.png") no-repeat;
width: 796px;
height: 397px;
}
</style>
