Question

我希望用图像覆盖整个屏幕。太好了，background-size: cover;来救援。但后来我想要包含另一个具有固定宽度的元素和滚动条。这样做并使屏幕变小，整个屏幕不再被覆盖。请参阅https://output.jsbin.com/rogupezopu（截图和代码重复如下）。使用溢出滚动条时如何覆盖整个屏幕？

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Testing</title>
        <style type="text/css">
            body,div {margin:0;padding:0;}

            #wrapper {
                height:840px;
                background-image:url(http://s24.postimg.org/781yqtfdh/background2.jpg);
                background-repeat: no-repeat;
                background-size: cover;
                background-attachment: fixed;  /*http://stackoverflow.com/a/19364033/1032531 Doesn't work*/
                /* background-attachment: scroll; */  /*http://stackoverflow.com/a/23050520/1032531 Doesn't work*/
                /* background-size: 100% 100%; also doesn't work */
                /* background-position: center; probably redundent? */ 
            }
            #content {
                margin:0 auto;
                width: 960px;
                height:100%;
                overflow:auto;
            }
        </style> 
    </head>

    <body>
        <div id="wrapper">
            <div id="content">
                Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option incorrupte, sit unum pertinax theophrastus ut.

                Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis.

                Nam te tamquam omittam, eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci. In paulo disputationi ius, vide dissentias sadipscing eos cu.

                Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam. Facilisis repudiare conceptam sit an.
            </div>
        </div>
    </body> 
</html>

Answer 1

您的#content具有固定宽度。

#wrapper默认为width:100%。

#wrapper将具有屏幕的宽度。

因此，问题是background-size:cover位于#wrapper上，因此仅限于屏幕宽度。

解决方案？将背景移至#content或将#wrapper宽度增加到固定值min-width: 960px。

另一种解决方案是使用#content

限制width: 100%; max-width: 960px;的大小

解决方案1：

＆＃13;

body,
div {
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 840px;
  background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
#content {
  margin: 0 auto;
  width: 960px;
  height: 100%;
  overflow: auto;
}
@media screen and (max-width: 960px) {
  #wrapper {
    background: none;
  }
  #content {
    background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
  }
}

＆＃13;

<div id="wrapper">
  <div id="content">
    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option
    incorrupte, sit unum pertinax theophrastus ut. Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis. Nam te tamquam omittam,
    eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci.
    In paulo disputationi ius, vide dissentias sadipscing eos cu. Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam.
    Facilisis repudiare conceptam sit an.
  </div>
</div>

＆＃13;

解决方案2：

在min-width。

中使用#wrapper

＆＃13;

body,
div {
  margin: 0;
  padding: 0;
}
#wrapper {
  height: 840px;
  background-image: url(http://s24.postimg.org/781yqtfdh/background2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  min-width: 960px;
}
#content {
  margin: 0 auto;
  width: 960px;
  height: 100%;
  overflow: auto;
}

＆＃13;

<div id="wrapper">
  <div id="content">
    Ius ne quod posidonium, agam apeirian gubergren id eos, dolores percipit vis ex. Ex discere liberavisse his, sonet nominati conclusionemque et vis. Et admodum oporteat sit, eam facer affert mediocritatem ad, mea id omnium instructior. Pri ex natum option
    incorrupte, sit unum pertinax theophrastus ut. Nam an saperet delectus tractatos. Ad option persecuti appellantur usu. Dicta habemus fuisset per ea, ius adhuc iracundia ei. Te timeam integre pro, ex dolore possim audiam vis. Nam te tamquam omittam,
    eu diceret complectitur ius, quem omnesque sensibus in vel. Has eirmod accumsan atomorum ut, vel ei quod omittantur, expetendis neglegentur eu vim. Ad audiam fuisset cum. Quis mutat fabellas te nam, usu ut sumo suscipiantur, eos at lorem aeque graeci.
    In paulo disputationi ius, vide dissentias sadipscing eos cu. Usu te graece vivendo, ludus latine nonumes te has. Pri id quando tantas offendit, nam ea viderer dissentiet. Facilis consequat concludaturque sea ut, an mel persius evertitur eloquentiam.
    Facilisis repudiare conceptam sit an.
  </div>
</div>

＆＃13;

Answer 2

将overflow: auto;添加到您的#wrapper元素。

这样做，您的包装器将扩展到其内容，并且将是滚动的内容，而不是您的文档。

用溢出滚动条覆盖背景

2 个答案:

解决方案1：

解决方案2：