Er zijn CSS-eigenschappen, zoals achtergrondafbeeldingen, randafbeeldingen, maskering en clippingeigenschappen, waarmee u kunt voeg direct afbeeldingen toe naar webpagina's en hun gedrag regelen. Er zijn echter ook minder vaak genoemde afbeelding-gerelateerde CSS-eigenschappen werk aan afbeeldingen die zijn toegevoegd met de HTML-tag, welke de voorkeursmanier is om afbeeldingen toe te voegen aan webpagina's.
De functieomschrijving van deze laatste eigenschappen varieert van de schaduw van de afbeelding besturen naar de scherpte instellen, om ons te helpen het uiterlijk en de positie van de afbeeldingen die met de worden toegevoegd, beter te controleren label. Laten we ze een voor een bekijken.
1. Afbeeldingen verscherpen met image-rendering
Wanneer een afbeelding wordt opgeschaald, de browser maakt de afbeelding gladder, dus het ziet er niet korrelig uit. Maar, afhankelijk van de resolutie van het beeld en het scherm, is dit misschien niet altijd het beste. U kunt dit browsergedrag beheren met de image-rendering eigendom.
Deze goed ondersteunde woning bestuurt het algoritme dat wordt gebruikt om een afbeelding te schalen. De twee belangrijkste waarden zijn scherpe randen en korrelig.
De scherpe randen waarde onderhoudt het kleurcontrast tussen pixels. Met andere woorden, geen afvlakking van afbeeldingen, welke geweldig voor pixelillustraties.
Wanneer korrelig wordt gebruikt, kunnen de nabijgelegen pixels van een pixel dat wel zijn neem het uiterlijk aan, waardoor het lijkt alsof ze samen zijn vormen een grote pixel, geweldig voor schermen met een hoge resolutie.
Als je goed blijft kijken naar de randen van de bloemen in de onderstaande GIF, zie je het verschil tussen een gewone en een korrelig beeld.
img image-rendering: pixelated;
2. Afbeeldingen uitrekken met object-fit
De bevatten, deksel, vullen waarden zijn allemaal bekend, we gebruiken ze voor de background-size eigenschap die bepaalt hoe een achtergrondafbeelding het element opvult waar het bij hoort. De object-fit eigendom lijkt er sterk op, zoals het ook bepaalt hoe een afbeelding in de container wordt geplaatst.
De bevatten waarde bevat de afbeelding binnen de container. deksel doet hetzelfde, maar als de beeldverhouding van de afbeelding en de container niet overeenkomen, de afbeelding is geknipt. vullen zorgt ervoor dat de afbeelding rekken en de container vullen. afbouwkiest de kleinste versie van de afbeelding weergeven.
Vergelijkbaar met de aanvulling background-position eigendom van background-size, er is een object-positie eigendom voor object-fit, te.
De object-fit eigendom verplaatst een afbeelding in een afbeeldingscontainer naar de gegeven coördinaten. De coördinaten kunnen worden gedefinieerd als absolute lengte eenheden, relatieve lengte eenheden, trefwoorden (top, links, centrum, bodem, en rechts), of a geldige combinatie van hen (top 20px rechts 5px, midden rechts 80px).
We voegen er soms aan toe (die inline van nature zijn) naast tekstreeksen voor meer informatie of decoratie. In dat geval, het uitlijnen van de tekst en de afbeelding in de gewenste positie kan een beetje lastig zijn - als u niet weet welke eigenschap u moet gebruiken.
De vertical-align eigendom is niet alleen voor tabelcellen. Het kan ook een inline-element uitlijnen in een inline-kader en kan dus worden gebruikt voor lijn een afbeelding uit in een regel tekst. Het kost een behoorlijk aantal waarden die op een inline-element kunnen worden toegepast, zodat u uit veel opties kunt kiezen.
PDF
5. Schaduw afbeeldingen met filter: slagschaduw ()
Wanneer ze onopvallend in tekst en vakken worden gebruikt, kunnen schaduwen leven toevoegen aan een webpagina. Hetzelfde geldt voor in afbeeldingen. Afbeeldingen met kernvormen en transparante achtergronden kan profiteren van de drop-shadow CSS-filter.
Zijn argumenten zijn vergelijkbaar met de waarden van de schaduwgerelateerde CSS-eigenschappen (schaduw tekst, box-shadow). De eerste twee vertegenwoordigen de verticale en horizontale afstand tussen de schaduwen en de afbeelding, de derde en vierde zijn de vervagen en de verspreid de straal van de schaduw, en de laatste is de schaduw kleur.
Net als schaduw tekst, drop-shadow creëert ook een schaduw die is gevormd naar het bijbehorende object. Dus, wanneer het wordt toegepast op een afbeelding, neemt de schaduw de vorm aan van het zichtbare gedeelte van de afbeelding.
#container width: 300px; hoogte: 300 px; img width: 100%; hoogte: 100%; object-fit: bevatten;
#container width: 300px; hoogte: 300 px; img width: 100%; hoogte: 100%; object-fit: bevatten; 
