将视图聚焦在背景上

Question

我通过 background: url(""); 将背景图像分配给了 body 元素。现在，它是一个非常大的图像，我想将视图准确地聚焦在中间。

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

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

我当前的示例位于 http://dev.dragonsinn.tk - and the CSS is here: http://dev.dragonsinn.tk/themes/dragonsinn/css/main.ws.php

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

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

Answer 1

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

有关背景大小的更多信息，请参阅此 link css 属性。

另请参阅 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;
}

将视图聚焦在背景上

Focus the view on background

html

image

css

responsive-design