Anmeldung im Vollbildmodus

Nun, es gibt einen Weg, wie Sie das leicht lösen können. Entweder tun Sie, was Bastian Rang in seiner Antwort gesagt hat, oder Sie können das Bild in zwei Bilder aufteilen. Die Login-Informationen sind also ein separates Bild. Auf diese Weise können Sie zentrieren und die Größe über CSS oder Javascript ändern. Stellen Sie das Login-Panel relativ zueinander ein und Sie können die Eingänge einfach platzieren und leicht verschieben. Ich kann mehr wenn nötig erklären. Das Problem, dem Sie gegenüberstehen, tritt auf, weil das Bild, das Sie haben, die Eingabe-Region und den Hintergrund kombiniert. Teile sie auf und es wird so viel einfacher.

Frohe Weihnachten und ein gutes neues Jahr Im Geist des Gebens, hier gehen Sie: [UPDATED] Entwurf Login des OP. Sie müssen es in Google Chrome sehen und die neueste Version von ihm verwenden. Nur in Google Chrome getestet.

Sie können sehen, wie ich Position verwendet: absolute und Position. Relativen mit% für Höhe, Breite, oben, unten, links und rechts, um den Effekt zu erzeugen

Bitte kopieren Sie es nicht einfach. Versuchen Sie zu verstehen, wie das funktioniert, es wird Ihnen auf lange Sicht besser dienen.

[AKTUALISIERT!] Gestaltung von OP-Login.

AKTUALISIERT: Ich bin mir nicht sicher, ob Sie erwarten, dass wir die Bilder für Sie erstellen und den Code für Sie bereitstellen. Aber wenn Sie es sind, würde ich gerne sagen, dass die Community den Code nicht für Sie schreiben wird, sondern Sie auf dem richtigen Weg führen wird. Was Sie wissen müssen, ist der intelligentere Pfad. Eine Aussage wie "Ich muss alle Browser unterstützen" ist eher unreif. Beginnen Sie mit der Auswahl Ihrer Zielgruppe, indem Sie die modernen Browsertrends studieren und welche Browser am häufigsten verwendet werden. Beginnen Sie mit der Auswahl der besten Browser für die Entwicklung. Es gibt über 160 Browser da draußen und es ist schwierig oder fast unmöglich, komplizierte detaillierte Layouts wie deins (d. H. Box-Schatten) zu entwickeln. Es gibt also grundsätzlich zwei Optionen: pure css oder mit Bildern und CSS . Reines CSS kann leicht angepasst werden, während Bilder ziemlich statisch werden und Zeit brauchen, um zu erstellen (wenn Sie mit Grafiken nicht vertraut sind) und / oder zu bearbeiten. Bilder müssen in so etwas wie Photoshop, Fireworks, GIMP oder Pixlr.com werden gemacht, um die Bilder zu erstellen und diese dann nach Bedarf skalieren, indem Sie den Browser (mit CSS) - auch in diesem für alle Browser nicht perfekt ist. Und ich werde schließen, indem ich sage, dass die Gemeinschaft die Bilder nicht für dich machen wird - das wird dein Job sein.

Disclaimer:. Einfache HTML ziemlich gleichmäßig über verschiedenen Browser gerendert werden, aber komplexere Einbeziehung kasten Schatten und Gradienten wird nicht

Ich habe ein kleines Diagramm erstellt, das die Ausschnitte darstellt, die gemacht werden können, um die Perfektion und Cross-Browser-Kompatibilität zu erreichen, nach der Sie suchen. Aber das ist ziemlich schwierig. Laden Sie das Bild herunter, um die Notizen / Markierungen in voller Auflösung anzuzeigen.

Schauen Sie in 9-patch Bilder: Im Grunde verwenden Sie dieses Konzept, wenn Sie sich entscheiden, diese Bilder zu brechen.

Sie können nicht.

Das ist ein Bild.

Bei einer Pixelbreite / -höhe haben Sie ein festes Bild und dann keinen Vollbild;

Bei einer prozentualen Breite / Höhe haben Sie eine Bilddehnung / -skalierung, und Sie werden keine Ahnung haben, wo und wie Sie Ihre Formularfelder neu positionieren.

Was Sie tun können, ist

1) render das Bild nur mit CSS, weil es ein einfaches Bild ist, und Sie können das mit CSS3 Gradients , Border-radius und Box-shadow Eigenschaften erreichen;

oder

2) Verwenden Sie ein festes Bild, stellen Sie margin: 0 auto ein, um es immer in der Mitte zu setzen. Dann lege eine Hintergrundfarbe um den Rest des Bildschirms zu füllen.

oder

3) Teilen Sie das Bild in zwei Bilder auf: Sie ändern die Größe des Hintergrundbildes (die Farbverläufe), während Sie nur für die Login-Box feste Breiten / Höhen einstellen und diese immer zentriert lassen.

Ich habe keine endgültige Lösung, aber einige Hinweise, die Sie verwenden können:

1. Sie mischen Pixel und Prozent. das ist nie eine gute Idee.
2. Warum verwenden Sie Bilder als Hintergrund? das Bild in Ihrem Beispiel ist nur mit CSS mit Hintergrund Farbverläufe möglich - & gt; Ссылка

Ich kann nur einen Weg vorschlagen, es kann viele geben.

Verwenden Sie zuerst das Hintergrundbild als tatsächliches Bild, img-Tag. Platzieren Sie dann die Eingabeelemente mit z-index absolut darauf. Berechnen Sie die Höhe des Bildes mit der jquery .height (). Und dann entscheiden Sie dynamisch über die Positionierung Ihrer Eingabefelder.

Andere Möglichkeit wäre, Ihr Bild in zwei Teile zu teilen. Verwenden Sie das Hintergrundbild für Seite und Formular separat. Verwenden Sie also das Formular Hintergrundbild 'die blaue Box' separat und verwenden Sie Pixelmaße als Breite: 400 px und stellen Sie es auf die Mitte ein. Dadurch können Sie genau entscheiden, wo Sie Ihr Element positionieren möchten.

Haben Sie versucht, den z-index zu ändern?

Versuchen Sie, den Z-Index der Formulare in eine positive Zahl zu ändern:

Wenn Sie den z-index in Aktion sehen möchten: Gehen Sie hier