将视图聚焦在背景上

Question

我有一个通过background: url(""); 分配给body 元素的背景图像。现在，它是一个非常大的图像，我想将视图完全集中在中间。

要了解我想要做什么，请想象以下情况：在 iPhone 或任何 Android 手机等触摸屏设备上打开图像。现在，捏拉放大到图像的中心，并想象每个缩放级别是另一个设备的不同视口。

我希望图像的特定部分始终位于中心。到目前为止，我尝试过使用background-{size,attachment,position}，但根本无法正确使用。

我当前的示例位于 http://dev.dragonsinn.tk - CSS 在这里：http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php

当前图像为 1920x1080，因此在大多数屏幕上它几乎可以正确居中。但我本地的分辨率是 1024x786 - 到目前为止看起来很糟糕......

需要什么 CSS，甚至制作一个尺寸过小的图像中心？我可以在以后使用媒体查询使其更大。现在，我只想真正把它放在中心。

Answer 1

以下内容将您的图像居中并针对不同的视口进行缩放。

有关 background-size css 属性的更多信息，请参阅link。

另请参阅http://caniuse.com/#feat=background-img-opts 了解浏览器支持。

body {
background: url("/cdn/theme/images/bg.jpg");
background-color: black;
color: white;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: 0 0;
background-size: cover;
}