Ich möchte ein Bild beim Schweben verwischen.
Das Problem ist, dass die Kanten des Bildes auch unangenehm verwischen. In der Fiddle können Sie es deutlich mit dem grünen Hintergrund sehen.
Wenn ich das Bild z. B. auf 1,2 skalieren würde, würde es das Problem am Ende beheben, aber während des Übergangs erscheinen die unscharfen Kanten immer noch.
Irgendwelche Ideen, wie man scharfe Kanten mit diesem Effekt bekommt?
html:
%Vor%css:
%Vor%Die Techniken, die ich kenne, erklärt Ссылка :
1. Wenn Sie ein Bild haben, das an allen Außenkanten die gleiche Farbe hat, wie im obigen Beispiel, können Sie die Hintergrundfarbe des Körpers oder eines Containerelements auf die gleiche Farbe einstellen. (FYI; trifft nicht wirklich zu dir, zumindest nicht in deiner Geige).
2..Verwenden Sie die Clip-Eigenschaft, um die Kanten des Bildes zu trimmen. Clip wird immer in der folgenden Reihenfolge angegeben:
clip: rect( top, offset of right clip from left side, offset of bottom from top, left)
Im obigen Beispiel ist das Bild 367 Pixel breit × 459 Pixel hoch und die Unschärfe 2 Pixel. Der Clip würde also wie folgt angegeben:
clip: rect(2px,365px,457px,2px);
(Beachten Sie, dass der Clip nur auf Elemente angewendet wird, die position: absolute auf sie angewendet haben. Wenn Sie Unterstützung in IE8 und früher erhalten möchten, vergessen Sie nicht, das px am Ende der Werte zu löschen). (Keine Ahnung, ob Sie Fotos in einem Stapel, einem Raster oder nur Callouts, etc. auslegen. Könnte angebracht sein, wenn Sie die absolute Positionierung verschlucken können.)
3. Wickeln Sie das Bild in ein umschließendes Element (z. B. a), das etwas kleiner ist als das Bild, indem Sie Überlauf: auf das äußere Element und das Bild nach links und leicht nach oben verschieben, um die sichtbare Unschärfe zu beseitigen an diesen Rändern.
-
Auch das Umrahmen des Bildes scheint zumindest in Webkit zu helfen, aber ich habe es nicht ausgiebig getestet.
%Vor%Nachdem ich den Tag damit verbracht hatte, war ich in der Lage, eine beschissene, hässliche, hacky Lösung zu erstellen. Wahrscheinlich werde ich es nicht im realen Projekt verwenden, vielleicht könnte es jemanden dazu inspirieren, etwas in meiner Lösung zu verwenden, aber es etwas weniger hässlich zu machen. Zumindest sieht das Endergebnis so aus, wie ich es gerne hätte!
Mit einem weißen Rand und Box-Sizing: Rand-Box, und dann einige Ränder konnte ich das Endergebnis haben scharfe Kanten, und 3/4 Kanten, um den grünen Hintergrund während des Übergangs nicht zu zeigen. Wenn jemand herausfinden würde, warum einige Kanten während des Übergangs mit dem Hintergrund verblassen, würde das wahrscheinlich helfen.
html:
%Vor%CSS:
%Vor%Ich hoffe immer noch auf etwas Besseres!
Tags und Links css