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

Question

假设我想要一种只显示HTML中250x250像素的图像的中心50x50像素的方法。我怎样才能做到这一点。另外，有没有办法对css：url（）引用执行此操作？

我知道CSS中的clip，但这似乎仅在与绝对定位一起使用时才起作用。

Answer 1

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

Answer 2

另一个替代方法是以下方法，尽管不是最干净的方法，因为它假定图像是容器中的唯一元素，例如在这种情况下：<header class="siteHeader">&nbsp; <img src="img" class="siteLogo" /></header>然后，您可以将容器用作所需大小的蒙版，并以负边距包围图像以将其移动到正确的位置：.siteHeader{&nbsp; &nbsp; width: 50px;&nbsp; &nbsp; height: 50px;&nbsp; &nbsp; overflow: hidden;}.siteHeader .siteLogo{&nbsp; &nbsp; margin: -100px;}演示可以在此JSFiddle中看到。似乎只能在IE> 9和所有其他浏览器的所有重要版本中使用。