7 Stimmen

Wie kann ich ein HTML-Element beliebiger Größe mit teilweise transparenten Rändern erstellen?

Betrachten Sie das folgende Bild:

grass with deckle edge

Das soll aussehen wie ein Rasenstück mit rauen Kanten. Es ist ein 200x200 Pixel png Bild, mit Transparenz an den Rändern, um ein natürliches Aussehen zu geben.

Das Problem ist, dass ich versuche, eine Webseite zu gestalten, auf der verschiedene Elemente in unterschiedlichen Größen diesen Hintergrund haben sollen, aber ich kann keine einfache CSS-Hintergrundeigenschaft verwenden, weil die Wiederholung eines solchen Bildes nicht funktioniert: Die Transparenz auf der linken Seite ist zum Beispiel deutlich als Naht zwischen den einzelnen Kopien des Bildes sichtbar. Aber wenn ich das Bild einfach strecke, um es anzupassen, sieht es auch nicht sehr gut aus.

Gibt es eine (browserübergreifende) Möglichkeit, dies zu erreichen? jQuery-Lösungen sind ebenfalls akzeptabel. Danke!

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X