Es gibt CSS-Eigenschaften wie Hintergrundbilder, Rahmenbilder, Maskierungs- und Ausschneideeigenschaften, mit denen Sie dies tun können Bilder direkt hinzufügen auf Webseiten und kontrollieren deren Verhalten. Es werden jedoch auch weniger häufig bildbezogene CSS-Eigenschaften genannt Arbeiten an Bildern mit der HTML-Tag, die bevorzugte Art, Bilder zu Webseiten hinzuzufügen.
Die Jobbeschreibung dieser letzteren Eigenschaften variiert von Steuern des Bildschattens zu die Schärfe einstellen, Damit können wir das Erscheinungsbild und die Position von Bildern, die mit dem Bild hinzugefügt werden, besser kontrollieren Etikett. Lass uns sie einzeln sehen.
1. Schärfen Sie Bilder mit Bild-Rendering
Wenn ein Bild hochskaliert wird, wird der Browser angezeigt glättet das Bild, so sieht es nicht pixelig aus. Abhängig von der Auflösung von Bild und Bildschirm ist dies jedoch möglicherweise nicht immer die beste. Sie können dieses Browserverhalten mit der Bild-Rendering Eigentum.
Diese gut unterstützte Eigenschaft steuert den zum Skalieren eines Bildes verwendeten Algorithmus. Seine zwei Hauptwerte sind knackige Kanten und pixeliert.
Das knackige Kanten Wert erhält den Farbkontrast zwischen den Pixeln. Mit anderen Worten, Bilder werden nicht geglättet ideal für pixelgrafik.
Wann pixeliert verwendet wird, könnten die nahen Pixel eines Pixels nimm sein Aussehen auf, so dass sie zusammen wie sie scheinen ein großes Pixel bilden, ideal für hochauflösende Bildschirme.
Wenn Sie die Blumenkanten in der GIF unten genau betrachten, können Sie den Unterschied zwischen einem regulären und einem a erkennen pixeliert Bild.
img Bildwiedergabe: pixelig;
2. Bilder mit strecken Objekt-fit
Das enthalten, Abdeckung, füllen Werte sind alle bekannt, wir verwenden sie für die Hintergrundgröße Diese Eigenschaft steuert, wie ein Hintergrundbild das Element füllt, zu dem es gehört. Das Objekt-fit Eigenschaft ist ziemlich ähnlich, wie es auch bestimmt wie groß ein Bild in seinem Container ist.
Das enthalten Wert enthält das Bild in seinem Container. Abdeckung macht dasselbe, aber wenn das Seitenverhältnis des Bildes und des Containers nicht übereinstimmt, wird der Bild wird abgeschnitten. füllen bewirkt das Bild dehnen und füllen Sie den Behälter. herunterskalierenwählt die kleinste Version des Bildes anzeigen.
Ähnlich wie die Ergänzung Hintergrundposition Eigentum von Hintergrundgröße, dort ist ein Objektposition Eigentum für Objekt-fit, auch.
Das Objekt-fit Eigentum verschiebt ein Bild in einem Bildcontainer zu den angegebenen Koordinaten. Die Koordinaten können als definiert werden absolute längeneinheiten, relative Längeneinheiten, Schlüsselwörter (oben, links, Center, Unterseite, und Recht), oder ein gültige Kombination von ihnen (top 20px rechts 5px, Mitte rechts 80px).
Wir fügen manchmal hinzu (die von Natur aus inline sind) neben Textzeichenfolgen für zusätzliche Informationen oder Dekoration. In diesem Fall, Text und Bild ausrichten In die gewünschte Position kann ein bisschen knifflig sein - wenn Sie nicht wissen, welche Eigenschaft verwendet werden soll.
Das vertikal ausrichten Eigentum ist nicht exklusiv für tabellenzellen allein. Es kann auch ein Inline-Element innerhalb einer Inline-Box ausrichten und kann daher verwendet werden Richten Sie ein Bild in einer Textzeile aus. Es erfordert eine ganze Reihe von Werten, die auf ein Inline-Element angewendet werden können, sodass Sie viele Optionen zur Auswahl haben.
PDF
5. Schattenbilder mit Filter: Schlagschatten ()
Bei unauffälliger Verwendung in Texten und Feldern können Schatten einer Webseite Leben einhauchen. Gleiches gilt für Bilder. Bilder mit Kernformen und transparenten Hintergründen kann von der profitieren Schlagschatten CSS-Filter.
Ihre Argumente sind ähnlich den Werten der schattenbezogenen CSS-Eigenschaften (Text-Schatten, Box Schatten). Die ersten beiden repräsentieren die vertikaler und horizontaler Abstand Zwischen den Schatten und dem Bild befinden sich der dritte und der vierte verwischen und das Ausbreitungsradius des Schattens, und der letzte ist der Schattenfarbe.
So wie Text-Schatten, Schlagschatten erstellt auch einen Schatten, der ist an das zugehörige Objekt geformt. Wenn er also auf ein Bild angewendet wird, nimmt der Schatten die Form des sichtbaren Abschnitts des Bildes an.
#container width: 300px; Höhe: 300px; img width: 100%; Höhe: 100%; object-fit: enthalten;
#container width: 300px; Höhe: 300px; img width: 100%; Höhe: 100%; object-fit: enthalten; 
