如何使用CSS在图像上显示区域 [英] How to show a region on a image with CSS

问题描述

我有一个125x250的图像，我需要显示它的125x125区域。

我可以通过CSS执行此操作吗？怎么样？

I have a 125x250 image and I need to just display a 125x125 region of it.
Can I do this via CSS? How?

谢谢

推荐答案

有CSS 剪辑 属性，但设置有点笨拙正如@edd在他的回答中指出的那样，只能用于绝对和固定定位的图像。

There is the CSS clip property but it's a bit clunky to set up and, as @edd points out in his answer, works for absolutely and fixedly positioned images only.

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

I personally would create a 125x125 div and, depending on the situation, either

• 让图像成为div的 background-image （你甚至可以使用<$ c来定位它） $ c> background-position

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

Put the image in it, and give the div overflow: hidden (advantage: It will still be an image element with an ALT text)

如果你需要整个事情在文档流程中表现得像一个图像，你可以给 div display：inline-block property（旧版IE不支持）。

If you need the whole thing to behave like an image in the document flow, you can give the div the display: inline-block property (Not supported by older IEs).

这篇关于如何使用CSS在图像上显示区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！