Question

我有一个<header class="header">，在这个标题标签中我有导航栏。基本上我是通过header课程设置背景图片，因此我可以将其余的<body>内容放在图片下方。我的页面布局是：

<header class="header">
  <nav>
    navbar content
  </nav>
</header>

<body>
  all the text and images are here in the body
</body>

这是我的css：

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

.header {
  width: 100%;
  height: 100%;
  margin: auto;
  background: url('../img/background.jpg') no-repeat;
  background-size: cover;
}

问题在于，当我在MacBook Air上拉网站时，我的背景图像完全适合并且反应灵敏，但是当您在Mac桌面上拉起我的网站时，图像并不适合整个屏幕。我也尝试过：

.header {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

但那并没有奏效。可能是因为我的图像尺寸？如何使它适合任何屏幕上的整个屏幕，包括一台大型Mac桌面显示器？

Answer 1

如果百分比（％）不起作用，您可以使用vh（查看端口高度）和vw（查看端口宽度）来设置背景大小

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
body  {
    background-image: url("https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg");
    
    background-size: 100vw 100vh;
}
</style>
</head>
<body>

<h1>The background-image Property</h1>

<p>Hello World!</p>

</body>
</html>

＆＃13;

Answer 2

设置背景颜色的最佳方法是在里面添加一个div 体

<body>
     <div class='bg'></div>
</body>

现在在css

.bg{
  background-image:url('../img/background.jpg');
  background-size:100% 100%;
   z-index:-100;

 }

无论屏幕尺寸大小，都可以将背景图像调整到整个屏幕

2 个答案: