Question

我正在尝试使我的#header背景图像流畅，因此它在任何移动设备上看起来都不错。我正在使用此模拟器测试我的网站http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://toarumajutsunoindex.me/背景图片在chrome中没有显示正确的宽高比，但在firefox中它运行正常。我真的不知道它在真正的iphone上看起来是否合适。任何人都可以帮我修复背景吗？

background-image: url(images/header.jpg);
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
width: 100%;

Answer 1

在背景图像（或任何图像）上使用百分比将使其缩放以适应屏幕，从而更改宽高比。如果您不希望这种情况发生，但希望它适合屏幕并保持相同的尺寸，请使用以下代码，否则将100％更改为“cover”。这应该在chrome中使用，并且还应该使用-ms-filter，它也应该在IE中工作。

background: url(images/header.jpg) no-repeat top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg',     sizingMethod='scale');
-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/header.jpg', sizingMethod='scale');

在某些浏览器上，背景图像不正确

1 个答案: