Rand an Rahmenradius hinzufügen Bildhintergrund bluten durch
Ich füge einen schwarzen Rahmen zu Bildern mit einem blauen Hintergrund hinzu und dabei scheint es, als würde ich einen so auffälligen hintergrundfarbigen Umriss auf der Innenseite des Rahmens hinzufügen. Gibt es eine Möglichkeit, das los zu werden? Der Code, den ich verwende, ist einfach:
%Vor%Und Sie können die Hintergrundfarbe sehen, indem Sie beispielsweise jedem Bild einen Radius hinzufügen:
3 Antworten
Es gibt mehrere Möglichkeiten, um diesen störenden Rand-Radius-Hintergrund zu vermeiden:
Methode 1: Wrapper mit Hintergrundfarbe
Fügen Sie das <img> in ein Wrapper-Element ein und fügen Sie dem Wrapper eine Füllung mit einer Hintergrundfarbe hinzu, die dem Rahmen von <img> entspricht. Auf diese Weise berücksichtigt jedes Antialiasing, das auf dem Bild stattfindet, die Hintergrundfarbe des Wrappers und nicht die Hintergrundfarbe der Seite.
Methode 2: Hintergrundfarbe zu Bild hinzufügen
Fügen Sie Ihrem <img> eine Hintergrundfarbe hinzu, die der Rahmenfarbe entspricht. Es wird die Hintergrundfarbe <img> anstelle der Seitenhintergrundfarbe verwendet, um das Antialiasing durchzuführen.
Methode 3: Verwenden Sie stattdessen das Padding
Mach dir keine Sorgen um eine Grenze. Fügen Sie Ihrem <img> eine Füllung hinzu, die der gewünschten Rahmengröße entspricht, und fügen Sie eine Hintergrundfarbe in der gewünschten Rahmenfarbe hinzu. Dies bringt Ihnen den gleichen Effekt mit der geringsten Menge an Code.
Hier ist ein JSFiddle mit jeder dieser Methoden: Ссылка
@stvnrynlds gab eine interessante Antwort und ich wollte das selbst mit dem tatsächlichen Code testen.
Ich habe unten ein Snippet mit beiden Versionen zum Vergleich erstellt.
.test1 - verwendet das Auffüllen mit einem Wrapper anstelle eines Rahmens
.test2 - verwendet nur Rahmen
Wenn Sie 500% in den Browser hineinzählen, sehen Sie das Endergebnis:
