html - 难以在页眉/页脚之间插入背景图像-6ren

html - 难以在页眉/页脚之间插入背景图像

转载作者：太空宇宙更新时间：2023-11-04 14:14:19

所以我已经设置了我的 HTML 并开始相应地设置样式，但是我正在尝试创建填充/覆盖效果以便我的图像适合页眉和页脚并覆盖屏幕但是我得到了这个问题。我想要的是覆盖整个页面/屏幕。

我确定这很容易解决，我就是想不通!

http://s28.postimg.org/he9h8lae3/screene.png

这是我的代码

HTML

`<body>

        <header id="page-header">
            <div class="container">
               <h1></h1>
                <h2></h2>
            </div>
         </header>

          <section class="page-main">
            <div class="container">
                <div class ="main">


             </div>
            </div>
          </section>

            <footer id="page-footer">
                <div class="container">
                 <h4></h4>
                <nav>
                    <ul>
                  <li><a href="feedback.html">Got Feedback?</a></li>
                </ul>
            </nav>
            </footer>
        </div><!-- #container -->
    </body>
</html>

CSS

body {
    color: #000;
    font-family: 'Rokkitt', serif;
    font-size: 1em;
    line-height: 1.2;
    width: 100%;
    height: 100%; }



#container {
    max-width: 1280px;
    margin: auto; }

main { display: block }


h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: 2em;
    line-height: 1;
    font-weight: bold; }

h2 {
    font-size: 1.2em;
    margin: 20px 0 20px 20px;
    text-align: center; }

h3 {  }


#page-header {
    background-color: #FFB90F;
    color: black;
    overflow: hidden; }

    #page-header h1 {
        color: black;
        margin: 20px 0 20px 20px;
        text-align: center; }


.page-main {
    background: url("../images/img_a.png") center center no-repeat;
    height: auto;
    background-size: cover;
    overflow: hidden;
    padding: 3%;
    box-shadow: inset 0 0 5px rgba(0,0,0,.75); }

#page-footer {
    background: #282828;
    color: white; }

    #page-footer nav { text-align: right; }

        #page-footer nav li {
            color: white;
            display: block; }

        #page-footer nav a {
            color: white;
            display: block;
            margin-right: 20px; }

最佳答案

如果您想覆盖空间，您可能需要查看 CSS3 background-size .

element{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

关于html - 难以在页眉/页脚之间插入背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20481870/

文章推荐： html - CSS样式加载消息

文章推荐： java - 使用运行时调用的抽象方法的值

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 难以在页眉/页脚之间插入背景图像

CSS