Verwenden Sie eine CSS-Umwandlung auf einer ganzen Seite einschließlich fester Hintergründe (in Firefox)

Ich habe ein Skript gemacht, das meine Website mit einem gewissen Verhältnis neu definiert: 'Ratte'. Ich mache eine Skala aber das Skala schafft weißen Ränder, damit ich die gesamte HTML-Seite umwandeln und ich schickte es an Ursprung in den Koordinaten 0, 0.Verwenden Sie eine CSS-Umwandlung auf einer ganzen Seite einschließlich fester Hintergründe (in Firefox)

document.documentElement.style.transform = "scale(" + rat + ")"; 
document.documentElement.style.width = 100/rat + "%"; 
document.documentElement.style.transformOrigin = '0 0';

Das Problem, das ich ist haben, dass einige Hintergrundbilder mit dem folgende Gut transformieren nicht:

background-attachment: fixed;

Jedesmal, wenn ich meine hTML-Seite verwandeln die Hintergrundbilder mit background-attachment: fixed; nicht verwandeln.

können Sie überprüfen, was ich spreche hier in meinem Portfolio:

http://testedesignfranjas.tumblr.com/

Öffnen Sie die Seite in Chrom und in FIREFOX und die Unterschiede sehen. Das Problem ist in Firefox.

* Entschuldigung für mein schlechtes Englisch

Quelle

2014-12-17 gn66

Der Code, den Sie zur Verfügung gestellt haben, ist reiner JavaScript skalieren. Es gibt überhaupt keine jQuery. –

oh ok danke für die Antwort Ich bearbeitete – gn66

Sind Sie sicher, dass der obige Code ausgeführt wird? Ist es in den Kopf Ihrer Website platziert, und wenn nicht, wird es irgendwo innerhalb aufgerufen? –

Ich habe eine teilweise Antwort. Firefox behandelt verschachtelte, feste Elemente nicht immer korrekt, wenn eine Transformation verwendet wird. Anstatt Hintergrund-Anhang zu verwenden, mache das div mit der Bildposition: fixed. Das zweite div ist relativ oder statisch, also überlagert es das erste 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>

Ich habe das Bild außerhalb der div verschoben und setzen Sie img1 auf Position: behoben. Führen Sie die Skalierung einzeln aus, einmal für img1 und einmal für das äußere div, das den Inhalt enthält.

<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>

Der Stil verwendet position: fixed für den img1 und relativ für den äußeren.

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

JSFiddle Example

Quelle

2014-12-23 21:52:35 downeyt

Verwenden jQuery das "feste" Attribut zu entfernen, wenn Sie Dokument

$("img").each(function() { 
$(this).css("background-attachment",""); 
});

Quelle

2014-12-27 09:14:30

Verwenden Sie eine CSS-Umwandlung auf einer ganzen Seite einschließlich fester Hintergründe (in Firefox)

Antwort

Verwandte Themen