Question

我正在尝试使用背景图像1080p，但我希望它在标题下开始，并在页脚底部页面底部完成。

在CSS中最好的方法是什么？

提前感谢任何帮助

Answer 1

以下是使用background-cover

执行此操作的方法

body, html {
  height: 100%;
  }

.cover{
          
    height: 700px;
 
    background: url(http://lorempixel.com/1080/780/) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

<div class="header">
 <h1> Header Content</h1>
</div>
    
<div class="cover">
 
</div>
<footer>
    <h2>Footer content</h2>
</footer>

。
单击“运行代码段”，然后单击“全屏”以运行此代码。

如果您想要图像，页眉和页脚并且适合浏览器视图，请使用此height属性加上这个：

// make body and html take up full height of browser viewport
body, html {
   height: 100%;
}

// make the image div take up about 80% of html and body height - to leave room for header and footer
.cover {
  height:80%;
}

body, html {
  height: 100%;
  }

.cover{
          
    height: 80%;
 
    
    background: url(http://lorempixel.com/1080/780/) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    
}

<div class="header">
 <h1> Header Content</h1>
</div>
    
<div class="cover">
 
</div>
<footer>
    <h2>Footer content</h2>
</footer>

CSS背景图像在#header和#footer之间缩放

1 个答案: