Как я могу отображать только часть изображения в HTML/CSS?

Скажем, мне нужен способ отображения только центра 50x50px изображения, которое 250x250px в HTML. Как мне это сделать. Кроме того, есть ли способ сделать это для ссылок css: url()?

Я знаю клип в CSS, но, похоже, работает только при использовании с абсолютным позиционированием.

Ответ 1

Один из способов сделать это - установить изображение, которое вы хотите отображать в качестве фона в контейнере (td, div, span и т.д.), а затем отрегулировать фоновое положение, чтобы получить спрайт, который вы хотите.

Ответ 2

Как уже упоминалось в этом вопросе, есть свойство clip css, хотя оно требует, чтобы обрезаемый элемент был position: absolute; (что является позором):

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

Ответ 3

Другой альтернативой является следующий, хотя и не самый чистый, поскольку он предполагает, что изображение является единственным элементом в контейнере, например, в этом случае:

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

Затем вы можете использовать контейнер в виде маски с требуемым размером и окружать изображение отрицательным полем, чтобы переместить его в нужное положение:

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

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

Демо можно увидеть в этом JSFiddle.

Кажется, что работает только в IE > 9 и, возможно, во всех значимых версиях всех других браузеров.