Question

我正在尝试制作一个“背景”图像，它既可以缩放以填充屏幕，又是固定的（即不会滚动其余的内容。）

我首先尝试使用真实的背景图片：

background: url(http://i.imgur.com/DJaWd.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

但是你可能知道，使用这种技术，图像会在iOS设备上滚动。所以，我尝试使用CSS和div来实现这种方法：

CSS：

#fixedbg{
background:url('/images/contest_bkg.jpg') no-repeat center center;
position:fixed;
height:100%;
width:100%;
z-index:-1;
top:0;
}

第二种方法会阻止图像滚动，但图像显示为1：1，而不是缩放以适合屏幕/视口大小。关于如何在保持锁定状态下使图像按比例缩放的任何提示？

Answer 1

试试这个：

-webkit-background-size: 1600px 1060px;

当然px是背景图片的宽度高度

iOS设备上的缩放，固定背景

1 个答案: