在包括固定背景的整个页面上使用CSS转换（在Firefox中）

gn66 发表于 Dev

gn66

我制作了一个脚本，可以按一定比例重新调整网站大小：“鼠”。我进行缩放，但是该缩放会产生白色边距，因此我转换了整个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并不总是正确地处理嵌套的固定元素。不要使用背景附加，而是使div的图像位置固定。第二个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使用position：fixed，对外部使用相对。

<style>
    div#outer { 
        position: relative;
        height: 900px;
        width: 900px;
    }
    #img1 {
        position: fixed;
        background: url("image.png") no-repeat;
        width: 796px;
        height: 397px;
    }
</style>

JSFiddle示例

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。