全屏显示背景图像

Question

我正在设置一个网站，并希望创建一个响应式的背景图像，但我只能得到单线与背景图像。我应该使用什么属性来使整个背景图像适合？

我创建了两个文件，index.html：

<div id="logo">Test</div>

style.css：

#logo {
background-image: url("bg.png");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}

我尝试了很多次，但只有一行得到了背景图像。我希望背景图像完全显示在屏幕上，而不使用高度属性，我认为这使网站的响应性较差。

Answer 1

如果您希望图像具有与屏幕相同的高度，则可以使用height:100vh。但是如果你只想要全尺寸的图片，你可以这样做：

​

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

#image{
max-height: 100%;
    max-width: 100%;
}

#text{
  position: absolute;
  color: white;
  top: 0
}

<img id="image" src="https://images.unsplash.com/photo-1528920304568-7aa06b3dda8b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80">
<div id="text">test</div>

​

Answer 2

您应该更改徽标div的高度，并通过添加高度将其设置为全高:主体和徽标div的高度为100%，您的代码应如下所示

html, body
{
   height: 100%;
}
#logo {
   background-image: url("bg.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   height:100%;
}