Làm cách nào tôi có thể hiển thị chỉ một phần hình ảnh trong HTML / CSS?

Giả sử tôi muốn một cách để chỉ hiển thị trung tâm 50x50px của hình ảnh có kích thước 250x250px trong HTML. Làm thế nào tôi có thể làm điều đó. Ngoài ra, có cách nào để làm điều này cho các tham chiếu css: url () không?

Tôi biết về clip trong CSS, nhưng dường như chỉ hoạt động khi được sử dụng với định vị tuyệt đối.

Một cách để làm điều đó là đặt hình ảnh bạn muốn hiển thị làm nền trong một thùng chứa (td, div, span, v.v.) và sau đó điều chỉnh vị trí nền để có được sprite bạn muốn.

Như đã đề cập trong câu hỏi, đó là cliptài sản css, mặc dù nó không đòi hỏi rằng nguyên tố này bị cắt bớt được position: absolute;(đó là một sự xấu hổ):

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

Bản demo của JS Fiddle , để thử nghiệm.

Để bổ sung cho câu trả lời ban đầu - hơi muộn màng - Tôi đang chỉnh sửa để hiển thị việc sử dụng clip-path, đã thay thế cliptài sản hiện không còn dùng nữa .

Các clip-pathbất động sản cho phép một loạt các lựa chọn (hơn-hơn so với bản gốc clip), trong:

• inset- hình chữ nhật / hình khối, được xác định bằng bốn giá trị là 'khoảng cách từ' (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- được xác định bởi một loạt các tọa độ x/ yliên quan đến gốc của phần tử ở góc trên bên trái. Khi đường dẫn được đóng tự động, số điểm tối thiểu thực tế cho đa giác sẽ là ba, bất kỳ ít hơn (hai) là một dòng hoặc (một) là một điểm : polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url - đây có thể là URL cục bộ (sử dụng bộ chọn id id) hoặc URL của tệp bên ngoài (sử dụng đường dẫn tệp) để xác định một SVG, mặc dù tôi chưa thử nghiệm với (vì vậy) không thể cung cấp cái nhìn sâu sắc về lợi ích hoặc cảnh báo của họ.

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>

Bản demo của JS Fiddle , để thử nghiệm.

Người giới thiệu:

• clip- lưu ý: không dùng nữa .
• clip-path(MDN) .
• clip-path(W3C) .

Một cách khác là như sau, mặc dù không phải là sạch nhất vì nó giả sử hình ảnh là thành phần duy nhất trong một thùng chứa, chẳng hạn như trong trường hợp này:

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

Sau đó, bạn có thể sử dụng bộ chứa làm mặt nạ với kích thước mong muốn và bao quanh hình ảnh với lề âm để di chuyển nó vào đúng vị trí:

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

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

Bản demo có thể được nhìn thấy trong JSFiddle này .

Chỉ có vẻ hoạt động trong IE> 9, và có lẽ tất cả các phiên bản quan trọng của tất cả các trình duyệt khác.