将类添加到标题时背景图像消失

Question

我的CSS代码遇到了一些麻烦。我想在标题元素中添加一个类，以便在样式表中区分首页的标题和内容页面的标题。我从没有类的头文件开始，一切都正常运行。突然，当我决定在标题元素中添加一个类时，背景图像消失了，我不知道为什么。

此作品：

header {
    width: 100%;
    height: 511px;
    background: url('cakesresized.jpg') no-repeat;
    margin: 10px 0px;

}

.homepgintro {
    font-size: 0.9em;
    position: absolute;
    left: 65%;
    height: 22em;
    width: 22em;
    background-color: rgba(181, 194, 202, 1);
    padding: 7px;
    color: #fff;
    text-align: center;
}

.homepgintro img {
    display: block;
    width: 150px;
    margin: 0 auto;
    border-radius: 100px;
}

当相应的HTML如下时：

<header class="homepg1"><h1>Shannon Loves Sweets</h1>
            <div class="homepgintro">
                <img src="profile.jpg">
                <h2>Hi there!</h2>
                <p>I'm Shannon! I'm a super busy full-time employee/part-time student who <i>loves</i> sweets and all things fried. Join me on my journey to cook at home more often, and to eat healthier while still working in some sweet treats!</p></div></header>

但是此CSS将不起作用，并使背景图像消失：

.homepg1 {
    width: 100%;
    height: 511px;
    background: url('cakesresized.jpg') no-repeat;
    margin: 10px 0px;

}

.homepgintro {
    font-size: 0.9em;
    position: absolute;
    left: 65%;
    height: 22em;
    width: 22em;
    background-color: rgba(181, 194, 202, 1);
    padding: 7px;
    color: #fff;
    text-align: center;
}

.homepgintro img {
    display: block;
    width: 150px;
    margin: 0 auto;
    border-radius: 100px;
}

出了什么问题？这是我的样式表（当前正在按预期运行的版本）的完整CSS代码：

/* UNIVERSAL STYLES */

#page {
    max-width: 1200px;
    width: 85%;
    left: 7.5%;
    position: relative;
    margin-top: 100px;
    background-color: #D9C6C1;
    border-radius: 25px;
    overflow: hidden;
}

body {
    font-family: 'Roboto Slab', Georgia, serif;
    font-size: 16px;
    background-color: white;
    color: #fff;
}

h1 {
    font-family: 'Pacifico', cursive;
    font-size: 3em;
    padding: 4px;
}

h2 {
    font-family: 'Sunshiney', 'Comic Sans MS', cursive;
    font-size: 2em;
    margin: 0;
}

section {
    padding: 10px;
}

/* STELLA SAYS */

.stellasays img {
    border-radius: 100%;
    width: 220px;
    float: right;
}

/* NAVIGATION */

nav {
    background-color: white;
    top: 0;
    left: 0;
    width: 100%;
    margin-bottom: 60px;
    position: fixed;
    z-index: 100;
}

nav li {
    display: inline-block;
    padding: 7px;
    margin-top: 6px;
}

nav a {
    font-family: 'Pacifico', cursive;
    color: #cef0de;
    border-bottom: 1px solid #cef0de;
    text-decoration: none;
    padding: 4px;
    font-size: 1.3em;
    transition: color 0.4s ease-in-out 0.2s;
}

nav a:hover, nav a:focus {
    color: #E9BE68;
    border-bottom: 1px solid #E9BE68;
}

/* HOMEPAGE STYLES */

header {
    width: 100%;
    height: 511px;
    background: url('cakesresized.jpg') no-repeat;
    margin: 10px 0px;

}

.homepgintro {
    font-size: 0.9em;
    position: absolute;
    left: 65%;
    height: 22em;
    width: 22em;
    background-color: rgba(181, 194, 202, 1);
    padding: 7px;
    color: #fff;
    text-align: center;
}

.homepgintro img {
    display: block;
    width: 150px;
    margin: 0 auto;
    border-radius: 100px;
}

Answer 1

我认为您提供的代码没有错误。我试图重新创建它，并且得到了预期的输出。也许还有其他一些CSS规则？

.homepg1 {
    width: 100%;
    height: 511px;
    background: url('https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500') no-repeat;
    margin: 10px 0px;

}

.homepgintro {
    font-size: 0.9em;
    position: absolute;
    left: 65%;
    height: 22em;
    width: 22em;
    background-color: rgba(181, 194, 202, 1);
    padding: 7px;
    color: #fff;
    text-align: center;
}

.homepgintro img {
    display: block;
    width: 150px;
    margin: 0 auto;
    border-radius: 100px;
}

<header class="homepg1"><h1>Shannon Loves Sweets</h1>
            <div class="homepgintro">
                <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
                <h2>Hi there!</h2>
                <p>I'm Shannon! I'm a super busy full-time employee/part-time student who <i>loves</i> sweets and all things fried. Join me on my journey to cook at home more often, and to eat healthier while still working in some sweet treats!</p></div></header>