Question

整个背景图片无法在移动设备上正常显示。如何显示完整的背景图像？

body {
background-color: #000; 
background-image: url(http://godwellontheloose.com/IMG_0463bwssww.jpg); 
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}   

a {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

Answer 1

首先将HTML和正文定义为100％高度和宽度。

html,body{width:100%; height:100%;}

添加此项后，任何设置为100％高度的元素都会将其显示为100％高度。下面是一个工作示例，运行代码并单击全屏。

html,body{width:100%; height:100%;}
body{margin:0px; padding:0px;}
.background{background-image:url('https://media-cdn.tripadvisor.com/media/photo-s/0e/85/48/e6/seven-mile-beach-grand.jpg');width:100%; height:100%;
background-color: #000; 
background-repeat: no-repeat; 
background-position: center;
background-attachment: fixed;       
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover; 
}

<div class="background"><a href="#test"></a></div>

完整的背景图像不显示在移动设备上

1 个答案: