Como posso exibir apenas uma parte da imagem em HTML / CSS?

Digamos que eu queira uma maneira de exibir apenas o centro de 50x50px de uma imagem com 250x250px em HTML. Como eu posso fazer isso. Além disso, existe uma maneira de fazer isso para referências css: url ()?

Estou ciente do clipe em CSS, mas isso parece funcionar apenas quando usado com posicionamento absoluto.

Uma maneira de fazer isso é definir a imagem que você deseja exibir como plano de fundo em um contêiner (td, div, span etc.) e depois ajustar a posição do plano de fundo para obter o sprite desejado.

Como mencionado na pergunta, existe a clippropriedade css, embora não exigem que o elemento que está sendo cortada é position: absolute;(que é uma vergonha):

.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>

Demonstração JS Fiddle , para experimentação.

Para complementar a resposta original - um pouco tardiamente - estou editando para mostrar o uso de clip-path, que substituiu a clippropriedade agora obsoleta .

A clip-pathpropriedade permite uma variedade de opções (mais do que o original clip), de:

• inset- formas retangulares / cubóides, definidas com quatro valores como 'distância à distância' (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- definido por uma série de x/ ycoordenadas em relação à origem do elemento no canto superior esquerdo. À medida que o caminho é fechado automaticamente o número mínimo de pontos realista para um polígono deve ser de três, qualquer menos (duas) é uma linha ou (um) é um ponto: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - pode ser um URL local (usando um seletor de id CSS) ou o URL de um arquivo externo (usando um caminho de arquivo) para identificar um SVG, embora eu ainda não tenha experimentado (ainda). não pode oferecer informações sobre seus benefícios ou ressalvas.

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>

Demonstração JS Fiddle , para experimentação.

Referências:

• clip- nota: descontinuado .
• clip-path(MDN) .
• clip-path(W3C) .

Outra alternativa é a seguinte, embora não seja a mais limpa, pois assume que a imagem é o único elemento em um contêiner, como neste caso:

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

Você pode usar o recipiente como uma máscara com o tamanho desejado e cercar a imagem com uma margem negativa para movê-la para a posição correta:

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

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

A demonstração pode ser vista neste JSFiddle .

Apenas parece funcionar no IE> 9, e provavelmente em todas as versões significativas de todos os outros navegadores.