我正在尝试将标题的背景图片扩展到浏览器高度的100%,但是它不起作用。 bg图像虽然是大墙纸,但只是一个小条,您看到我的错误了吗?

<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;
}

最佳答案

我认为这是因为您的背景图片设置为仅影响标题。尝试使其影响您的身体。

关于html - 如何使标题的bg图片达到浏览器高度的100%,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37040671/

10-11 12:52
查看更多