与css的全屏幕背景

Question

我正在使用此代码。它覆盖整个背景，包含1张图像。问题是它的上半部分，它被浏览器切断，下半部分被任务栏切断。当我全屏显示它工作正常。我希望图像完全位于浏览器中。有没有可用的方法??

#bg {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
}
#bg img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  min-width: 50%;
  min-height: 50%;
}

<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

Answer 1

您可以将当前的CSS更改为：

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
}

#bg img {
  position: absolute;
  /* display: cover; */
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

这是 example 1 。

或者，仅使用CSS加载图像并将其设置为背景。将您的代码更改为：

<强> HTML

 <div id="bg">
 </div>

CSS

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(images/bg.jpg);
  top: 0; 
  left: 0;
}

这是 example 2 。

他们都将图像设置为背景。

Answer 2

更改1

删除

 top: -50%; 
 left: -50%; 

代码。它隐藏了你提到的两个。

更改2

您需要在

中声明图像的宽度和高度

#bg img{
   width:100%;
   height:100%;
}