假设我想要一种只显示50x50px的HTML格式图像的中心位置的方法。我怎么能做到这一点。另外,有没有办法对css:url()引用做到这一点?
我知道在CSS中的剪辑,但它似乎只有在使用绝对定位时才起作用。
发布于 2008-09-11 21:37:29
一种方法是在容器中设置要显示为背景的图像(td、div、span等),然后调整背景位置以获得所需的精灵。
发布于 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中工作,可能在所有其他浏览器的所有重要版本中都有效。
发布于 2020-09-15 17:19:58
调整背景位置以在div
的不同位置移动背景图像
div {
background-image: url('image url')
background-position: 0 -250px;
}
https://stackoverflow.com/questions/57725
复制相似问题