Question

我正在试图弄清楚如何锁定div的背景图像的大小。我希望能够放大页面的大小，同时保持背景图像的大小相同，只改变裁剪因子。尝试做类似的事情...... http://developers.kippt.com/

.div{
    background-image: url(../img/background-image.png);
    background-repeat: no-repeat;
    margin: 0 auto;
    width: 100%;
    height: 600px;
    display: block;
    position: relative;
}

Answer 1

我之前使用过these techniques，但两者都运作良好。如果你阅读了每个的优点/缺点，你可以决定哪个适合你的网站。

如果您想远离上述错误，可以使用full size background image jQuery plugin。

Answer 2

您可以使用

//this will scale the background image as large as possible to cover the whole div
background-size:cover;

//for fixed positioning
background-attachment:fixed;
//to make it center (or center top, depends on your need)
background-position:center center;

有关背景尺寸的更多信息，请参阅文章here

锁定背景图像大小

2 个答案: