Question

答案是我不得不在路径中再加上一个/不知道为什么，例如背景图片：url（/destinationfolder/imagename.jpg）不背景图片：url（destinationfolder / imagename.jpg）

我想做一个全屏背景，代码很简单，但是没有用，任何人都能抓住这个问题吗？

这是HTML代码

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">

</head>
<body>

  <div class="bg">this is our div</div>

  <p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>

</body>
</html>

那就是CSS代码

body, html {
  height: 100%;
  margin: 0;
}

div {
  height: 100%;
}

.bg {   
  /* the proper height for the image */
  height: 100%;
  background-image: url('cover.jpg');  /* the use image location */
  background-repeat: no-repeat;   
  background-size: cover;
}

Answer 1

您几乎可以肯定需要background-size。

请记住，与使用手机的用户相比，拥有4K显示器的用户将很少见。因此，一旦完成添加移动支持的最后一步，请务必使用CSS Media Queries。您是看着屏幕来判断需要使用background-size的方式的人，因此请务必对开发人员工具中的选项进行修改；只需缩小浏览器窗口的大小，直到移动效果生效。您还可以使用诸如百分比（background-size: 100% 100%;）之类的单位。祝你好运！

.bg
{
 background-image: url(images/bg-desktop.png);
 background-size: contain;
}

@media (max-width: 1024px)
{
 .bg
 {
  background-image: url(images/bg-mobile.png);
  background-size: cover;
 }
}

Answer 2

尝试将body或div元素的最小高度设置为100vh 身体{min-height：100vh;}

可能的问题：由于您使用的是相对路径，因此图像应与css文件位于同一目录中。

任何人都可以帮助面对全屏背景问题

2 个答案: