Question

我正在尝试在标题后面显示背景图片。但由于某种原因，图像不显示。我对html和css相当新，但有其他场合要显示的背景图像。我错过了什么或者我必须改变一些线条吗？任何帮助将不胜感激，谢谢！

这是我的HTML代码：

<html>
<body>
<header>
    <div class="logo">
        <h1>My logo</h1>        
    </div>  

    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Me</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
</header>

<section class="home-main">
    <div class="container">
        <h1>This is foo</h1>
    </div>
</section>
</body>

</html>

这是我的css：

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

.container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
}

.clearfix::after,
section::after {
    content: '';
    display:block;
    clear:both;
}

/* typography
================= */

.unstyled-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* header
================= */

header {
    position: absolute;
    left: 0;
    right: 0;
    margin: 1em;
}

.logo {
    font-size: 1em;
    margin-left: 1em;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin: 1em;
    padding: 0.125em;
}

nav a {
    font-weight: 900;   
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8rem;
    padding: .75em; 
}

@media(min-width:40rem) {

    .logo {
        float: left;
    }

    nav {
        float: right;
        margin-top: 1em;
    }
}

@media(min-width:60rem) {
    .logo {
        font-size: 1.3em;
        margin-top: -.5em;
    }

    nav {
        margin-top: 1em;
    }

    nav a {
        font-size: 1.04em;
    }
}

/* home-main
================= */

.home-main {
    background-img: url('../manjitcss/img/manjit-main.png'); 
    background-size: cover;
    background-position: center;
    padding: 10em 0;
}

Answer 1

@ankit，您的班级home-main需要将background-img属性更改为background-image。名为background-img的背景图像没有别名。请参阅background-image css属性的MDNs参考。

我使用您的代码创建了一个codeply项目，并使用正确的名称修改了该属性。您可以查看here。

更正属性：

.home-main {
    background-image: url('http://via.placeholder.com/350x150'); 
    background-size: cover;
    background-position: center;
    padding: 10em 0;
}

Answer 2

我的注意力非常大的错误，问题只是我写了background-img而不是background-image！

Answer 3

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700,900');

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Raleway', sans-serif;
    text-align: center;
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}

.container {
    width: 95%;
    max-width: 70em;
    margin: 0 auto;
}

.clearfix::after,
section::after {
    content: '';
    display:block;
    clear:both;
}

/* typography
================= */

.unstyled-list {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* header
================= */

header {
    position: absolute;
    left: 0;
    right: 0;
    margin: 1em;
}

.logo {
    font-size: 1em;
    margin-left: 1em;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li {
    display: inline-block;
    margin: 1em;
    padding: 0.125em;
}

nav a {
    font-weight: 900;   
    text-decoration: none;
    text-transform: uppercase;
    font-size: .8rem;
    padding: .75em; 
}

@media(min-width:40rem) {

    .logo {
        float: left;
    }

    nav {
        float: right;
        margin-top: 1em;
    }
}

@media(min-width:60rem) {
    .logo {
        font-size: 1.3em;
        margin-top: -.5em;
    }

    nav {
        margin-top: 1em;
    }

    nav a {
        font-size: 1.04em;
    }
}

/* home-main
================= */

.home-main {
    background-image: url('https://res.cloudinary.com/rss81/image/upload/gw.jpg'); 
    background-size: cover;
    background-position: center;
    padding: 10em 0;
}

＆＃13;

<html>
<body>
<header>
    <div class="logo">
        <h1>My logo</h1>        
    </div>  

    <nav>
        <ul>
            <li><a href="">Home</a></li>
            <li><a href="">About Me</a></li>
            <li><a href="">Contact</a></li>
        </ul>
    </nav>
</header>

<section class="home-main">
    <div class="container">
        <h1>This is foo</h1>
    </div>
</section>
</body>

</html>

＆＃13;

Answer 4

＆＃34;背景 - img ＆＃34;财产是错的。你应该使用＆＃34; background-image＆＃34;：

.home-main {background-image: url('../manjitcss/img/manjit-main.png');}

https://www.w3schools.com/cssref/pr_background-image.asp

背景不显示HTML

4 个答案: