限制CSS中的背景位置

Question

是否可以将背景的y位置指定为“中心”并同时为其设置一个限制，以使实际y位置不会超过某个特定值？

假设图片高度为50像素。 我们将限制设置为25px。 如果容器的高度为70px，则背景y位置为10px。 容器将扩展为100px，背景图片垂直定位为25px。 容器进一步扩展到150px，背景y位置保持不变，即25px。

谢谢

Answer 1

你可以用image sprite来做到这一点

请参阅此链接http://www.w3schools.com/css/css_image_sprites.asp

Answer 2

您可以使用javascript执行此操作。 http://jsfiddle.net/jfPP3/ （在CSS中更改容器的高度很有趣）

var limit = 25; // you define your limit here
var container = document.getElementById('contain1');
var image = document.getElementById('img1');
var y = Math.round((container.offsetHeight - image.offsetHeight)/2);
if(y > limit){
    y = limit;
}
image.style.top= y + 'px';

只需定义一个极限，获取容器和图像的高度，然后使用极限检查结果y 。 最后定义图像的位置。

在我的示例中，我将图像放置为position:absolute ，但是您也可以简单地更改图像的top-margin 。