假设我想要一种只显示HTML中250x250像素的图像的中心50x50像素的方法。我怎样才能做到这一点。另外，有没有办法对css：url（）引用执行此操作？
我知道CSS中的clip，但这似乎仅在与绝对定位一起使用时才起作用。
Answers:
一种方法是在容器（td，div，span等）中将要显示的图像设置为背景，然后调整背景位置以获得所需的精灵。
background-size
正如问题中提到的那样，有一个clipcss属性，尽管它确实要求被裁剪的元素是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>JS Fiddle演示，用于实验。
为了补充最初的答案（有些晚了），我正在编辑以显示的用法clip-path，该用法已取代了现在不推荐使用的clip属性。
该clip-path属性允许以下选项的范围（大于原始选项clip）：
inset—矩形/长方体形状，定义为'distance-from'四个值(top right bottom left)。circle— circle(diameter at x-coordinate y-coordinate)。ellipse— ellipse(x-axis-length y-axis-length at x-coordinate y-coordinate)。polygon—由相对于元素左上角的原点的一系列x/ y坐标定义。当路径自动关闭时，多边形的实际最小点数应为3，再少（2）为一条线或（1）为一点：polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...])。url —可以是本地URL（使用CSS id选择器）或外部文件的URL（使用文件路径）来标识SVG，尽管我还没有尝试过，但是我无法提供有关其收益或警告的见解。div.container {
display: inline-block;
}
#rectangular {
-webkit-clip-path: inset(30px 10px 30px 10px);
clip-path: inset(30px 10px 30px 10px);
}
#circle {
-webkit-clip-path: circle(75px at 50% 50%);
clip-path: circle(75px at 50% 50%)
}
#ellipse {
-webkit-clip-path: ellipse(75px 50px at 50% 50%);
clip-path: ellipse(75px 50px at 50% 50%);
}
#polygon {
-webkit-clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
clip-path: polygon(50% 0, 100% 38%, 81% 100%, 19% 100%, 0 38%);
}<div class="container">
<img id="control" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="rectangular" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="circle" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="ellipse" src="http://lorempixel.com/150/150/people/1" />
</div>
<div class="container">
<img id="polygon" src="http://lorempixel.com/150/150/people/1" />
</div>JS Fiddle演示，用于实验。
参考文献：
clipclip-path（MDN）。clip-path（W3C）。另一种选择是以下方法，尽管不是最干净的方法，因为它假定图像是容器中的唯一元素，例如在这种情况下：
<header class="siteHeader">
<img src="img" class="siteLogo" />
</header>然后，您可以将容器用作所需大小的蒙版，并以负边距包围图像以将其移动到正确的位置：
.siteHeader{
width: 50px;
height: 50px;
overflow: hidden;
}
.siteHeader .siteLogo{
margin: -100px;
}演示可以在此JSFiddle中看到。
似乎只能在IE> 9和所有其他浏览器的所有重要版本中使用。