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

Question

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

谢谢

Answer 1

还有就是CSS clip属性，但它是一个有点笨重成立，正如@edd在他的回答中指出，适用于只是绝对和固定定位图像。

我个人将创建一个125x125像素div，并根据不同的情况，无论是

• 有图像是div的background-image（你甚至可以使用background-position

• 把图像中的位置它它，并给予divoverflow: hidden（优点：它仍然是一个带有ALT文本的图像元素）

如果您需要整个事物像文档流中的图像那样工作，您可以给divdisplay: inline-block属性（旧版IE不支持）。

Answer 2

您可以使用CSS Clip属性，但设置起来有点费劲，因为图像和父级需要是固定位置的绝对位置。但是一旦安装，它确实工作得很好。

例如：

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

Answer 3

这种技术也被称为 “子画面”。一个ALA article from 2004演示了基础知识，另一个很好的和简短的介绍可以在w3schools找到（www.w3schools.com/css/css_image_sprites.asp）。

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

Answer 4

把你的形象里div

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