如何在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,并可能在所有其他浏览器的所有重要版本。