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 Symbolen, die ich brauche.
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?Wie schneidet man den Hintergrund eines Elements ab, um nur einen Teil des Bildes anzuzeigen?

1. Bild:
enter image description here

2. Bild:
enter image description here

Quelle

2012-08-15 Hamed Momeni

Sie gehen zu müssen, die Verwendung von zwei separaten Symbolbilder, um dies so zu machen, 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 möchten (es wird an die Ränder, den Abstand oder den Inhalt des Box, nicht eine bestimmte Dimension.)

Erstellen Sie also zwei Symbole, verwenden Sie eine auf jeder Seite des Elements mit background-position.

As you can see here, mit einem Spritesheet zeigt es das gesamte Hintergrundbild anstelle der zwei Symbole, die Sie wollen. Es gibt noch keine Möglichkeit, BG-Bilder wie gewünscht zu schneiden. (ein Tag, hoffentlich!)

Quelle

2012-08-15 08:01:34 Kyle

Das ist, was ich gefunden habe.Bist du sicher, dass es keinen anderen Weg gibt? –

Leider ist dies der einzige Weg bis jetzt, vielleicht wird es eines Tages implementiert werden, aber für den Moment sind nur 2 Icons möglich :) – Kyle

Hoffentlich kommt dieser Tag bald genug! Vielen Dank. ;) –

Set zu Ihrem Element (wir div sagen) yor große backgound Bild und dann mit background-position einzustellen. Ihr Bild wird nach der Größe Ihres Elements (z. B. div) durchgestrichen.

in Ihrem Fall wird es um:

background-position: -87 -35;

und div Größe:

width: 28px; height: 30px

Quelle

2012-08-15 07:59:49 Samich

Bitte die Frage erneut lesen. Ich habe ein Eingabeelement und ich brauche es so groß wie es im Bild oben gezeigt wird. –

Hier ist, wovon ich rede: http://jsfiddle.net/jg7C6/3/ – Samich

Ich bekomme es jetzt. Vielen Dank. –

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:

background-image: url(sprites.png), url(sprites.png); 
background-position: center bottom, left top;

Sie auch background-postion in Pixel wie definieren:

background-position: -5px 10px, -35px 10px;

für weitere Informationen dies überprüfen link

Quelle

2012-08-15 07:59:56 Amyth

Danke, aber das habe ich nicht gefragt. Ich weiß, wie man mehrere Hintergründe benutzt. Meine Hauptfrage war, wie man ein Hintergrundbild schneidet. –

Sie müssen separate Symbole verwenden ODER Sie müssen 2 zusätzliche Elemente (zum Anzeigen der Symbole) über dem Eingabefeld überlagert haben. Letzteres ermöglicht es Ihnen, das Sprite selbst zu verwenden.

Quelle

2012-08-15 08:12:01 techfoobar

Letzteres würde es nicht erlauben, das Sprite an der Haupteingabe zu verwenden, ohne das Layout des Spritesheets neu zu ordnen. – Kyle

@KyleSevenoaks - Das Sprite muss als Hintergrund für die überlagerten Elemente und nicht für das Eingabefeld selbst verwendet werden. Wie Sie gesagt haben, kann bg nicht mit der heutigen CSS-Technologie abgeschnitten werden. – techfoobar

Ah, jetzt hole ich dich. Ok, das würde funktionieren, würde aber etwas unnötiges Markup erfordern. – Kyle

Wie schneidet man den Hintergrund eines Elements ab, um nur einen Teil des Bildes anzuzeigen?

Antwort

Verwandte Themen