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

Nur ​​einen Teil eines Bildes in HTML/CSS anzeigen

In der Webentwicklung wird nur ein bestimmter Teil eines Bildes angezeigt, während dieser erhalten bleibt Integrität kann mit CSS erreicht werden.

Mit CSS-Clip Eigenschaft

Wie in der Frage erwähnt, verfügt CSS über eine Clip-Eigenschaft. Allerdings muss das zuzuschneidende Element absolut positioniert sein, was seine Flexibilität einschränkt.

.container {
  position: relative;
}

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

In diesem Beispiel zeigt das Bild mit der ID „Clip“ nur den zentralen 50x50px-Teil des ursprünglichen 250x250px-Bildes an .

Hinweis: Die Clip-Eigenschaft verwendet die folgende Syntax: rect(top, right, unten, links). In diesem Fall haben wir 0 für den oberen und linken Wert, 100 Pixel für den rechten Wert und 200 Pixel für den unteren Wert angegeben.

Verwendung von CSS-URL()-Referenzen

Für CSS-URL()-Referenzen gibt es derzeit keine integrierte Möglichkeit, nur einen Teil eines Bildes anzuzeigen.

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