如何在HTML / CSS中仅显示图像的一部分？

Question

假设我想要一种只显示HTML中250x250像素的图像的中心50x50像素的方法。我怎样才能做到这一点。另外，有没有办法对css：url（）引用执行此操作？我知道CSS中的clip，但这似乎仅在与绝对定位一起使用时才起作用。

Answer 1

一种方法是在容器（td，div，span等）中设置要显示为背景的图像，然后调整背景位置以获取所需的精灵。

Answer 2

另一个替代方法是以下方法，尽管不是最干净的方法，因为它假定图像是容器中的唯一元素，例如在这种情况下：

<header class="siteHeader">

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

</header>

然后，您可以将容器用作所需大小的蒙版，并以负边距包围图像以将其移动到正确的位置：

.siteHeader{

    width: 50px;

    height: 50px;

    overflow: hidden;

}

.siteHeader .siteLogo{

    margin: -100px;

}

演示可以在此JSFiddle中看到。

似乎只能在IE> 9和所有其他浏览器的所有重要版本中使用。