html - 限制CSS中的背景位置

Question

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

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

谢谢

Answer 1

您可以使用 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图像的 。

Answer 2

你可以这样做image sprite

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