如何用CSS显示图像上的区域

这就是CSS clip 属性,但它的设置有点笨重,正如@edd在他的回答中指出的,它只适用于绝对和固定位置的图像。

我个人会创建一个125x125 div 而且,视情况而定

• background-image (您甚至可以使用 background-position

• 部门 overflow: hidden

如果您需要整个过程像文档流中的图像一样运行,那么可以给出 这个 display: inline-block

这种技术也被称为“精灵”。安 ALA article from 2004 演示了基础知识,另一个好的和简短的介绍可以在w3schools找到(www.w3schools.com/css/css\u image\u sprites.asp).

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

例子:

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

div

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