Wie kann ich nur einen Teil eines Bildes in HTML / CSS anzeigen?

Angenommen, ich möchte eine Möglichkeit, nur die Mitte 50x50px eines Bildes anzuzeigen, das 250x250px in HTML ist. Wie kann ich das machen. Gibt es auch eine Möglichkeit, dies für css: url () - Referenzen zu tun?

Mir ist der Clip in CSS bekannt, aber das scheint nur zu funktionieren, wenn er mit absoluter Positionierung verwendet wird.

Eine Möglichkeit besteht darin, das Bild, das Sie als Hintergrund anzeigen möchten, in einem Container (td, div, span usw.) festzulegen und dann die Hintergrundposition anzupassen, um das gewünschte Sprite zu erhalten.

Wie in der Frage erwähnt, gibt es die clipCSS - Eigenschaft, obwohl es nicht ist , wird erfordern , dass das Element abgeschnitten position: absolute;(was schade ist):

.container {
  position: relative;
}
#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
  /* clip: shape(top, right, bottom, left); NB 'rect' is the only available option */
}

<div class="container">
  <img src="http://lorempixel.com/200/200/nightlife/3" />
</div>
<div class="container">
  <img id="clip" src="http://lorempixel.com/200/200/nightlife/3" />
</div>

JS Fiddle Demo zum Experimentieren.

Um die ursprüngliche Antwort - etwas verspätet - zu ergänzen, bearbeite ich sie, um die Verwendung von zu zeigen clip-path, die die jetzt veraltete clipEigenschaft ersetzt hat.

Die clip-pathEigenschaft ermöglicht eine Reihe von Optionen (mehr als das Original clip), von:

• inset- rechteckige / quaderförmige Formen, definiert mit vier Werten als "Abstand von" (top right bottom left).
• circle- circle(diameter at x-coordinate y-coordinate).
• ellipse- ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate).
• polygon- definiert durch eine Reihe von x/ yKoordinaten in Bezug auf den Ursprung des Elements in der oberen linken Ecke. Da der Pfad automatisch geschlossen wird, sollte die realistische Mindestanzahl von Punkten für ein Polygon drei betragen. Weniger (zwei) ist eine Linie oder (eins) ist ein Punkt : polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - Dies kann entweder eine lokale URL (unter Verwendung eines CSS-ID-Selektors) oder die URL einer externen Datei (unter Verwendung eines Dateipfads) sein, um eine SVG zu identifizieren, obwohl ich (noch) nicht damit experimentiert habe kann keinen Einblick in ihren Nutzen oder Vorbehalt geben.

div.container {
  display: inline-block;
}
#rectangular {
  -webkit-clip-path: inset(30px 10px 30px 10px);
  clip-path: inset(30px 10px 30px 10px);
}
#circle {
  -webkit-clip-path: circle(75px at 50% 50%);
  clip-path: circle(75px at 50% 50%)
}
#ellipse {
  -webkit-clip-path: ellipse(75px 50px at 50% 50%);
  clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
  -webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
  clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}

<div class="container">
  <img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
  <img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>

JS Fiddle Demo zum Experimentieren.

Verweise:

• clip- Hinweis: veraltet .
• clip-path(MDN) .
• clip-path(W3C) .

Eine andere Alternative ist die folgende, wenn auch nicht die sauberste, da davon ausgegangen wird, dass das Bild das einzige Element in einem Container ist, wie in diesem Fall:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

Sie können den Container dann als Maske mit der gewünschten Größe verwenden und das Bild mit einem negativen Rand umgeben, um es an die richtige Position zu verschieben:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

Demo kann in dieser JSFiddle gesehen werden .

Scheint nur in IE> 9 zu funktionieren und wahrscheinlich in allen wichtigen Versionen aller anderen Browser.