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

How can I display just a portion of an image in HTML/CSS?

提问by Hafthor

Let's say I want a way to display just the the center 50x50px of an image that's 250x250px in HTML. How can I do that. Also, is there a way to do this for css:url() references?

假设我想要一种方法来仅显示 HTML 中 250x250 像素的图像的中心 50x50 像素。我怎样才能做到这一点。另外，有没有办法为 css:url() 引用做到这一点？

I'm aware of clipin CSS, but that seems to only work when used with absolute positioning.

我知道CSS 中的剪辑，但这似乎只在与绝对定位一起使用时才有效。

采纳答案by Espo

One way to do it is to set the image you want to display as a background in a container (td, div, span etc) and then adjust background-position to get the sprite you want.

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

回答by David says reinstate Monica

As mentioned in the question, there is the clipcss property, although it doesrequire that the element being clipped is position: absolute;(which is a shame):

正如问题中提到的，有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 demo, for experimentation.

JS Fiddle 演示，用于实验。

To supplement the original answer – somewhat belatedly – I'm editing to show the use of clip-path, which has replaced the now-deprecated clipproperty.

为了补充最初的答案——有点晚了——我正在编辑以展示 的使用clip-path，它已经取代了现在已弃用的clip属性。

The clip-pathproperty allows a range of options (more-so than the original clip), of:

该clip-path属性允许一系列选项（比原始选项更多clip），包括：

• inset— rectangular/cuboid shapes, defined with four values as '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— defined by a series of x/ycoordinates in relation to the element's origin of the top-left corner. As the path is closed automatically the realistic minimum number of points for a polygon should be three, any fewer (two) is a line or (one) is a point: polygon(x-coordinate1 y-coordinate1, x-coordinate2 y-coordinate2, x-coordinate3 y-coordinate3, [etc...]).
• url— this can be either a local URL (using a CSS id-selector) or the URL of an external file (using a file-path) to identify an SVG, though I've not experimented with either (as yet), so I can offer no insight as to their benefit or caveat.

• 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坐标定义。由于路径自动关闭，多边形的实际最小点数应为三个，任何少（两个）是一条线或（一个）是一个点：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 demo, for experimentation.

JS Fiddle 演示，用于实验。

References:

参考：

• clip— note: deprecated.
• clip-path(MDN).
• clip-path(W3C).

• clip— 注意：已弃用。
• clip-path(MDN)。
• clip-path(W3C)。

回答by Vincent

Another alternative is the following, although not the cleanest as it assumes the image to be the only element in a container, such as in this case:

另一种选择如下，虽然不是最干净的，因为它假定图像是容器中的唯一元素，例如在这种情况下：

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

You can then use the container as a mask with the desired size, and surround the image with a negative margin to move it into the right position:

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

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

Demo can be seen in this JSFiddle.

演示可以在这个 JSFiddle 中看到。

Only seems to work in IE>9, and probably all significant versions of all other browsers.

似乎只适用于 IE>9，并且可能适用于所有其他浏览器的所有重要版本。