Ich möchte, kann eine Schnittstelle ähnlich wie Windows Phone 10.Wie kann ich transparente Divs erstellen, die ein Bild als Hintergrund auf einem ansonsten schwarzen Hintergrund haben?
Sie sehen ein Beispiel von neu, was ich versuche, in HTML in diesem Bild zu erreichen:
Die mittleren Fliesen wie Windows handeln auf dem Baby-Bild, während der Raum zwischen den Fliesen schwarz ist.
Es gibt keine magische hier los ist. Auf dem Bild, das Sie geliefert haben, hat das Telefon einen Desktop eines Kindes, das mit einem Briefkasten versehen ist (schwarzer Streifen oben und unten). Die Kacheln am oberen und unteren Bildschirmrand sind opak und zeigen ihre eigenen Hintergründe. Die Kacheln in der Mitte sind vollständig transparent, haben aber einen schwarzen Rand, um das Kind hinter ihnen zu zeigen.
Um die Fliesen, müssen Sie einfach:
.tile { background-color:rgba(0,0,0,0);
border: 3px solid black;
}
Werfen Sie einen Blick auf diese Geige für ein einfaches Beispiel: https://jsfiddle.net/Lnafvvx9/6/
Für einen dynamischen Ansatz: Sie könnten ein Bild in viele kleine Teile zerschneiden (und die geschnittenen Ränder löschen). Dann erstellen und richten Sie verschiedene divs mit einem individuellen Hintergrundbild aus, das Ihre geschnittenen Bildteile enthält.
Es gibt auch eine Art von Arbeit für statische Seiten: Erstellen Sie ein Div mit dem großen (nicht in Bild geschnitten). Verwenden Sie ein transparentes PNG-Bild, das nur den "Rahmen" des schwarzen Hintergrunds enthält. Platziere das in einem Div auf dem anderen Div und du hast den Style. Dann müssen Sie kleine divs über die Positionen hinzufügen, wo Sie das Bild sehen können.
Die wichtige Sache ist, dass diese Designs Pixel perfektes statisches Layout erfordern. Das bedeutet, dass Sie die divs-Größe nicht ändern oder die Position ändern können, wenn das Browserfenster oder der Bildschirm kleiner ist. Aber es ist auch der einfachste Weg, dies zu tun, und der letzte Vorschlag erlaubt es, das Bild zu ändern, ohne es zu schneiden.
Für echte dynamische Annäherung können Sie das gleiche Bild (unliced) in jede Taste laden (verwenden Sie verschiedene CSS-ID für alle) und positionieren Sie den Hintergrund von ihnen individuell zusammenpassen. Der Vorteil davon ist, dass Sie dann CSS3 zum Beispiel verwenden können, um die Größe der Schaltfläche bei Hover zu skalieren. Dies kann zu einem kühl expandierenden Bildeffekt führen. schauen Sie sich einfach http://www.w3schools.com/cssref/pr_background-position.asp http://www.w3schools.com/css/css3_animations.asp
Ich hoffe, das hilft :)
in der Regel gibt es einen Code mit einer Antwort –
Vielen Dank für die detaillierte Antwort! Ich werde ein bisschen warten, wenn jemand auf irgendeine magische Weise kommt, sonst werde ich Ihrer Herangehensweise folgen. –
@Maulzal Normalerweise gibt es Code in der Frage auch;) –
Ich sehe keine Transparenz. – Gendarme
Sie können Körper Hintergrundfarbe als schwarz und erstellen Sie diese divs setzen Ränder um sie herum wird das gleiche zu schaffen. – satya
Ich meine transparent, wie Sie das Hintergrundbild durch sie sehen können. @satya Ich muss das Hintergrundbild für jede Fliese dann von Hand erstellen, bekomme ich Sie? Ich hatte gehofft, es gab einen Weg, dies zu vermeiden, so kann ich den Hintergrund dynamisch ändern –