背景图片未覆盖全屏

Question

我正在建立一个单页向下滚动式网站，其中每张幻灯片都是一页。 在上一张幻灯片中，背景图像以某种方式被剪切了，只有一个空白。 该幻灯片ID上使用的CSS：

#seven {background:url(../img/camara_view.JPG) bottom no-repeat fixed; }

这是印刷品： http : //postimg.org/image/489mxfagt/

有什么办法吗？

Answer 1

您可以使用背景比例属性：

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Scaling_background_images

Answer 2

如果您支持现代浏览器，则可以执行以下操作。

#seven {
    background-size: cover /* contain */ /* width in px/em/rem ie 50rem 20rem */
}

或者，您可以将图像放在容器内的img标签中，使用fixed或absolute定位来放置容器。 接下来，将其宽度设置为100% ，将高度设置为100%或者将top, left, right, bottom的值设置为0 ，同时隐藏溢出。 最后，将img宽度设置为width: auto和height: 100%并使用display: block 。 这里的例子 。

Answer 3

使用CSS背景图片

 html { 
      background: url(images/bg.jpg) no-repeat center center fixed; 
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }

否则，您可以尝试其他方式，以下代码在ie7中正常运行

CSS代码

#bg {
position: fixed;
top: -50%; 
left: -50%; 
width: 200%; 
height: 200%;
}

 #bg img {
position:absolute;
top:25%;left:25%; 
right:25%;bottom:25%;
margin:auto; 
min-width:50%;
min-height:50%;}

HTML代码

<div id="bg">
  <img src="images/Body-bg.png" alt="">
</div>

Answer 4

只需添加.bgwidth {width：100％; } .bgheight {高度：100％; }

这将消除问题