Wie schneidet man den Hintergrund eines Elements ab, um nur einen Teil des Bildes anzuzeigen?
Zur Verdeutlichung sehen Sie sich die folgenden Bilder an.
Die erste ist, was ich erreichen möchte. Es ist ein Texteingabeelement mit zwei Hintergrundbildern, eines auf jeder Seite.
Das zweite Bild ist das Sprite-Bild mit den benötigten Symbolen.
Jetzt ist meine Frage, ist es möglich, ein Hintergrundbild zu schneiden, um nur einen Teil des Bildes anzuzeigen? Ist es außerdem möglich, es mit mehreren Hintergründen zu verwenden?
1. Bild:
2. Bild:
4 Antworten
Sie müssen zwei separate Icon-Bilder verwenden, damit dies so funktioniert, wie Sie es momentan erwarten.
Bei CSS-Sprites wird der Hintergrund durch die Größe des Elements abgeschnitten. Es gibt eine experimentelle CSS3-Eigenschaft namens background-clip , aber es funktioniert nicht so, wie Sie es möchten (es wird an den Rahmen, der Füllung oder dem Inhalt von abgeschnitten) die Box, keine bestimmte Dimension.)
Erstelle also zwei Icons, benutze eins auf jeder Seite des Elements mit background-position .
Wie Sie hier sehen können wird bei einem Spritesheet das gesamte Hintergrundbild anstelle der beiden Symbole angezeigt. Es gibt noch keine Möglichkeit, BG-Bilder wie gewünscht zu schneiden. (eines Tages, hoffentlich!)
Sie müssen separate Symbole verwenden ODER Sie müssen zwei zusätzliche Elemente (zum Anzeigen der Symbole) über dem Eingabefeld eingeblendet haben. Letzteres lässt Sie das Sprite selbst verwenden.
mit CSS3 können Sie mehrere Hintergrundbilder für ein Element verwenden. Um einen bestimmten Teil des Bildes anzuzeigen, müssen Sie die Eigenschaft background-position festlegen.
zum Beispiel:
%Vor% Sie können auch background-postion in Pixeln definieren wie:
Weitere Informationen finden Sie in diesem Link
Tags und Links html css background-image clip css-sprites