如何使用CSS在图像上显示区域

Question

我有一个125x250的图片，我只需要显示它的125x125区域。
我可以通过CSS做到吗？ 怎么样？

谢谢

Answer 1

有CSS clip属性，但是设置起来有点笨拙，正如@edd在他的回答中指出的那样，它仅适用于绝对位置固定的图像。

我个人会创建一个125x125的div ，根据情况，

• 将图片作为div的background-image （您甚至可以使用background-position定位它

• 将图像放入其中，并给div overflow: hidden （优点：它仍然是带有ALT文本的图像元素）

如果您需要整个事情像文档流中的图像一样，则可以给div display: inline-block属性（较旧的IE不支持）。

Answer 2

这种技术也称为“精灵”。 2004年的ALA文章展示了基础知识，另外一个很好的简短介绍可以在w3schools（www.w3schools.com/css/css_image_sprites.asp）上找到。

因此它基本上是一个relative的父元素。 子元素具有定义的大小和背景，例如background:url("sprite.png") 0 0; 。 要在其他子元素上使用精灵的另一部分，可以定义background:url("sprite.png") -125 0; 。

Answer 3

您可以使用CSS Clip属性，但是设置起来有点麻烦，因为图像和父级必须是固定位置的绝对值。 但是一旦安装，它确实可以很好地工作。

例：

img 
{
position:absolute;
clip:rect(0px,125px,125px,0px);
}

Answer 4

将您的图片放入div

<div style="width: 125px; height: 125px; overflow: hidden;">
    <img src="..." />
</div>