如何在HTML / CSS中显示图像的一部分？
比方说，我想要一种方式来显示HTML中250×250像素图像的中心50×50像素。 我怎样才能做到这一点。 另外，有没有办法做到这一点的CSS：url（）引用？
我知道剪辑在CSS中，但似乎只适用于绝对定位使用。
一种方法是将你想要显示的图像设置为容器中的背景（td，div，span等），然后调整background-position来获得你想要的精灵。
虽然你已经接受了一个答案，但我只是补充说，有一个（有点鲜为人知的） 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>
另一个select是以下，尽pipe不是最干净的，因为它假定图像是容器中的唯一元素，例如在这种情况下：
<header class="siteHeader"> <img src="img" class="siteLogo" /> </header>
然后，您可以使用容器作为所需大小的遮罩，并用负边距围绕图像将其移至正确的位置：
.siteHeader{ width: 50px; height: 50px; overflow: hidden; } .siteHeader .siteLogo{ margin: -100px; }
演示可以在这个JSFiddle中看到。
似乎只能在IE> 9，并可能在所有其他浏览器的所有重要版本。
