1

我用：

<style>
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}
</style>

试图让背景图像始终拉伸以显示整个图像，但是当我测试这个时，图像变得很小......这是怎么回事？

4

2 回答 2

4

你需要给身体一个高度。

html, body {
     height: 100%;
}
body {
    background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
    background-repeat: no-repeat;
    background-size: contain;
}

或者您可以添加一个“背景 div”。

#bkg {
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:0;
  
  background-image: url("http://www.drought-smart-plants.com/images/two-succulents-flowering-21457588.jpg");
  background-repeat: no-repeat;
  background-size: contain;
}
<div id="bkg"></div>

于 2015-11-11T06:11:15.387 回答
1

这将通过取出显示图像的完整分辨率background-size:contain

结果

于 2015-11-11T06:11:07.260 回答