html - CSS - 将位置从固定更改为允许滚动

Question

我目前正在使用一些代码以“按比例填充”类型的方式显示图像。我正在使用的代码用于我前一段时间为网站创建背景图像的元素，现在我想将定位从固定更改为允许滚动。但是我无法计算出边距和尺寸。

代码如下:

<div id="Main Page">

<div id="Background">
<img src="http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU" />
<style>
#Background{
position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#Background img{
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}
</style>
</div>

Answer 1

如果你想为整个网站使用背景图像，你可以使用这个 css 代码:

body {
    background-image: url("http://googledrive.com/host/0By-qb7dZ_m5feE94MkcwSWxLckU"); 
    background-attachment: fixed;
    background-size: 100% 100%;
}

根据您的背景图像，您可以尝试 background-size: cover; 而不是 background-size: 100% 100%; 以获得更好的结果。

这是一个 fiddle 示例:https://jsfiddle.net/hxefwhpL/