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。Example here。

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

这将消除问题

不覆盖全屏的背景图像

4 个答案: