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;
}

把观点集中在背景上

1 个答案: