Question

尝试将标题的背景图像扩展到浏览器高度的100％，但它不起作用。 bg图像只是一个小酒吧，虽然它是一个大壁纸，你看到我的错误？（请不要判断该代码的含义，它只是用于练习HTML / CSS;）这就是HTML文件：

<head>                                             
    <meta charset="UTF-8">                         
    <title>TEXT</title>                            
    <meta name="description" content="text">  
    <meta name="keywords" content="text" >    
    <meta http-equiv="expires" content="0">        
    <link rel="stylesheet" href="css/stylesheet.css">    

</head>

<body>                                             
    <header>                                       
        <h1>TEXT <br> <span>TEXT</span></h1>      
    </header>

    <section>                                      
        <article>
        <p>TEXT</p>
        <img src="images/spachtel1.jpg"><br>
        <img src="images/spachtel1.jpg"><br><br>
        </article>
    </section>

    <footer>                                          
        <h3>text<br>
    </footer>
</body>

这是CSS文件：

@font-face {                                                    /* ERSTENS LADE font family rein*/
font-family: 'alex_brushregular';
src: url('../css/alexbrush-regular-webfont.eot');
src: url('../css/alexbrush-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../css/alexbrush-regular-webfont.woff2') format('woff2'),
url('../css/alexbrush-regular-webfont.woff') format('woff'),
url('../css/alexbrush-regular-webfont.ttf') format('truetype'),
url('../css/alexbrush-regular-webfont.svg#alex_brushregular') format('svg');
font-weight: normal;
font-style: normal;

}

html {
font-size: 1rem;

}

html {
height: 100%;

}

body {
min-height: 100%;
margin: 0;                                      
padding: 0;

}

h1 {                                                          /
font-family: 'alex_brushregular', 'sans-serif';

}

section p {                                                     
font-weight: 100;                                          
font-size: 1.13rem;                                        
font-style: italic;

}

span.by {                                                       
color: red;

}

section a {
color: #eda318;
text-decoration: none;                                  
font-style: normal;

}

section a:hover {                               
text-decoration: underline;

}

header {
background-image: url('../images/bgheader1.jpg');
background-position: 50% 50%;                     
background-size: cover;

}

Answer 1

我认为这是因为您的背景图片设置只会影响您的标题。试着让它影响你的身体。

Answer 2

尝试将背景图片样式添加到<BODY>标记而不是<HEADER>标记，如下所示：

body {
  background-image: url('http://lorempixel.com/400/200/nature/');
  background-position: 50% 50%;                     
  background-size: cover;                         
}

Answer 3

我解决了它：我不得不写

height: 100%;

到CSS文件的标题。

HMTL / CSS：使标题的BG图像达到浏览器高度的100％

3 个答案: