如何在 HTML/CSS 中仅显示图像的一部分? [英] How can I display just a portion of an image in HTML/CSS?

问题描述

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

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

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?

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

推荐答案

一种方法是将要显示的图像设置为容器中的背景(td、div、span 等)，然后调整背景-位置来获得你想要的精灵.

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.

这篇关于如何在 HTML/CSS 中仅显示图像的一部分?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！