2017-02-25 2 views
-2

Stick Die CSS-Klasse namens .svgImage wird auf eine <div> auf der Seite angewendet. Jedes Mal, wenn ich die Größe des Browserfensters ändere, wird das Svg-Bild korrekt skaliert, aber es bewegt sich weiter auf der Seite.Stick SVG unten rechts auf dem Bildschirm mit CSS

Wenn Sie beispielsweise das Browserfenster vertikal verkleinern, wird das Svg-Bild nach oben verschoben. Und horizontal kleiner wird die Svg nach links bewegen.

Das Svg-Bild muss unten rechts bleiben. Stellen Sie sich die Svg-Datei als viereckiges Quadrat vor, die untere rechte Ecke sollte in der unteren rechten Ecke der Seite bleiben.

Hier ist die CSS für die div-Stick:

.foo 
{ 
    background : url(images/GraphicElementDesktop.svg); 
opacity : 1; 
height: 45%; 
width: 33%; 
position : absolute; 
background-repeat: no-repeat; 
right: 0px; 
bottom: 0px; 
z-index: 5000; 
filter: alpha(opacity=25) progid:DXImageTransform.Microsoft.Alpha(opacity=25); 
} 

Irgendwelche Ideen, wie ich dieses Problem beheben?

Vielen Dank im Voraus!

+0

Warum diese nach unten gestimmt zu werden, ist hinzufügen? Kann mir das jemand vorher sagen, bevor ich herabziehe? Ich kann nichts sehen, was gegen die SO-Regeln verstößt. – Imdad

+0

Sie könnten auch HTML hinzufügen –

+0

@TobiObeck Es gibt kein HTML außer der Tatsache, dass die Klasse zu einem div im Körper wie angegeben hinzugefügt wird. :) – Imdad

Antwort

1

Sie haben

background-position: right bottom; 

Arbeits Geige https://jsfiddle.net/411dxm1n/1/

+0

Entschuldigung, ich habe das CSS jetzt bearbeitet. Sieh dir das bitte jetzt an? – Imdad

+0

Ich habe meine Antwort bearbeitet –

+0

Omg ja! Ich danke dir sehr! – Imdad

Verwandte Themen