Question

在我需要使用正文中的内容动态扩展背景图片的情况下，我遇到了问题。

＆＃13;

function myclick() {
  var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.'


  document.getElementById("demo").innerHTML = text + text;

}

＆＃13;

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
}

#root {
  height: 100%;
  width: 100%;
}

.background {
  background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 4.2%;
  height: 100%;
}

.base {
  margin: auto;
  background-color: white;
  margin-bottom: 2%;
  height: auto;
  width: 665px;
  display: block;
  border-radius: 5px;
  top: 40px;
  position: relative;
}

＆＃13;

<body>
  <div id="root">
    <div class="background">
      <div class="base">
        <p id="demo"></p>

        Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas
        expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto
        mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur
        id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu.
        His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas
        consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.
      </div>
    </div>
  </div>
  <button onclick="myclick()">Click me</button>

</body>

＆＃13;

如果单击顶部的按钮，主体内容会增加，但背景的大小仍然保持不变。有没有办法让这个工作？

Answer 1

您可以在min-height:100%;班级中使用height:100%;代替.background

function myclick() {
      var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.'


      document.getElementById("demo").innerHTML = text + text;

    }

html {
      height: 100%;
      width: 100%;
    }

    body {
      height: 100%;
      width: 100%;
    }

    #root {
      height: 100%;
      width: 100%;
    }

    .background {
      background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      padding-bottom: 4.2%;
      min-height: 100%;
    }

    .base {
      margin: auto;
      background-color: white;
      margin-bottom: 2%;
      height: auto;
      width: 665px;
      display: block;
      border-radius: 5px;
      top: 40px;
      position: relative;
    }

<body>
      <div id="root">
        <div class="background">
          <div class="base">
            <p id="demo"></p>

            Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas
            expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto
            mandamus volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur
            id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu.
            His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas
            consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.
          </div>
        </div>
      </div>
      <button onclick="myclick()">Click me</button>

    </body>

Answer 2

有一个css属性Background-Size

https://www.w3schools.com/cssref/css3_pr_background-size.asp

background-size: cover可能非常适合您的用例。另一个选项是contain。

Answer 3

删除背景类的高度并向其添加一个浮动（也给它100％的宽度来管理浮动）

这是一个有效的例子：

＆＃13;

function myclick() {
  var text = 'Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram.Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus volutpat. Cum elit libris an.Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his.Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei.Duo et summo nobis cotidieque, reque tantas consetetur id usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.'


  document.getElementById("demo").innerHTML = text + text;

}

＆＃13;

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
}

#root {
  height: 100%;
  width: 100%;
}

.background {
  background-image: url(https://image.freepik.com/free-psd/abstract-background-design_1297-87.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  padding-bottom: 4.2%;
  /* height: 100% */
  width: 100%;
  /* To manage float resize */
  float: left;
  /* To follow content height */
}

.base {
  margin: auto;
  background-color: white;
  margin-bottom: 2%;
  height: auto;
  width: 665px;
  display: block;
  border-radius: 5px;
  top: 40px;
  position: relative;
}

＆＃13;

<div id="root">
  <div class="background">
    <div class="base">
      <p id="demo"></p>

      Lorem ipsum dolor sit amet, mutat minim per eu. Eligendi maluisset ea pri, at per brute reque dissentias. In nisl latine voluptua pri, his et omnesque contentiones, te ius possit consequat. Vel error aeque ad, sit putent graeco adipiscing no. No sit fabellas
      expetenda, ea usu ignota antiopam qualisque, vix at tantas dictas electram. Sea ne wisi aeterno, qui ei zril graece dolorem. Ut nec vero assueverit voluptatibus, tantas dictas ei sit, hinc aperiri vix et. Quod molestie pri ad. Has te detracto mandamus
      volutpat. Cum elit libris an. Sumo epicurei est te, ad nec cibo facilisi theophrastus. Vim eu delenit sensibus ocurreret, id repudiandae mediocritatem est, ei verterem voluptatibus eam. Eu omnes insolens qui. Quodsi tibique efficiantur id nam, et
      vel oratio diceret. Id sed admodum sapientem. Debitis assueverit sit at, no audire torquatos nam, an graece iuvaret his. Putent persius abhorreant pro ad, dicam vocent habemus et eos, ne wisi mazim bonorum quo. Atqui vulputate an usu. His ut quot
      quidam quaestio, vim ei voluptatum interesset. Ei mei amet phaedrum adipisci, no mundi saperet petentium sed. Vim mazim timeam ei, cu adhuc persius graecis sit, suas sint alienum in mei. Duo et summo nobis cotidieque, reque tantas consetetur id
      usu. Eum doctus labitur cu. Est at diam tollit inermis, pro at elitr petentium dissentiunt. Cu fugit singulis persequeris nam, eum cetero ornatus similique no. Case mollis ius ex, aperiri honestatis persequeris ad vix.
    </div>
  </div>
</div>
<button onclick="myclick()">Click me</button>

＆＃13;

背景图片随着内容的扩展

3 个答案: