Wie kann ich mit HTML und CSS einen bestimmten Teil eines Bildes anzeigen?

Anzeigen eines Teils eines Bildes in HTML/CSS

Die Möglichkeit, einen bestimmten Teil eines Bildes anzuzeigen, ist eine häufige Anforderung im Web Entwicklung. Ob zum Erstellen einer Miniaturansicht oder zum Hervorheben eines bestimmten Abschnitts, es stehen mehrere Techniken zur Verfügung:

HTML-Lösung

Das element bietet eine leistungsstarke Lösung zur Darstellung unterschiedlicher Bildausschnitte nach bestimmten Kriterien. Durch die Verschachtelung mehrerer Elemente innerhalb eines Im Container können Sie unterschiedliche Bild-URLs oder -Stile für unterschiedliche Ansichtsfenstergrößen, Gerätepixelverhältnisse oder andere Bedingungen angeben. Dieser Ansatz bietet eine größere Flexibilität bei der Steuerung des angezeigten Bildteils:

<picture>
  <source media="(min-width: 1000px)" srcset="image-full.jpg">
  <source media="(min-width: 500px)" srcset="image-medium.jpg 50w, image-full.jpg 100w">
  <img src="/static/imghwm/default1.png" data-src="image-small.jpg" class="lazy" alt="default image">
</source></source></picture>

CSS-Lösung mit clip()

Die Eigenschaft „clip()“, wie in der Frage erwähnt Mit dieser Option können Sie einen rechteckigen Bereich definieren, der innerhalb eines Elements angezeigt werden soll. Allerdings muss das Element absolut positioniert sein:

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

css:url()-Referenzen

Leider kann die Eigenschaft „clip()“ nicht direkt mit verwendet werden css:url()-Referenzen. Sie können jedoch ein neues Bildelement erstellen, das den gewünschten beschnittenen Teil aufweist, und dieses Bild dann als Hintergrundbild des Originalelements verwenden:

#element {
  background-image: url(clip.png);
  background-position: 50% 0%;
}

Das obige ist der detaillierte Inhalt vonWie kann ich mit HTML und CSS einen bestimmten Teil eines Bildes anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!