首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在HTML/CSS中仅显示图像的一部分?

如何在HTML/CSS中仅显示图像的一部分?
EN

Stack Overflow用户
提问于 2008-09-12 05:35:45
回答 3查看 274.8K关注 0票数 162

假设我想要一种只显示50x50px的HTML格式图像的中心位置的方法。我怎么能做到这一点。另外,有没有办法对css:url()引用做到这一点?

我知道在CSS中的剪辑,但它似乎只有在使用绝对定位时才起作用。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2008-09-11 21:37:29

一种方法是在容器中设置要显示为背景的图像(td、div、span等),然后调整背景位置以获得所需的精灵。

票数 125
EN

Stack Overflow用户

发布于 2014-04-22 21:21:50

另一种替代方法如下,尽管不是最干净的,因为它假定图像是容器中的唯一元素,例如本例:

<header class="siteHeader">
  <img src="img" class="siteLogo" />
</header>

然后,您可以将容器用作具有所需大小的蒙版,并用负边距包围图像以将其移动到正确的位置:

.siteHeader{
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.siteHeader .siteLogo{
    margin: -100px;
}

可以在this JSFiddle中看到演示。

似乎只在IE>9中工作,可能在所有其他浏览器的所有重要版本中都有效。

票数 41
EN

Stack Overflow用户

发布于 2020-09-15 17:19:58

调整背景位置以在div的不同位置移动背景图像

div { 
  background-image: url('image url')
  background-position: 0 -250px; 
}
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/57725

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档