Question

背景图片适用于我桌面上的所有网页以及手机上的所有网页。我试图弄清楚为什么它不会只显示在我的一个移动页面上。

以下是该网页的html：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Assets/Css/MPW.css">
</head>

<body class="pageContainer">
<header class="headerContent">
    <nav>
        <ul>
            <li class="navBarLeft">Website Name</li>
            <a class="navBarRight" href="contact.html">
                <li>Contact</li>
            </a>
            <a class="navBarRightCurrent" href="index.html">
                <li>Home</li>
            </a>
        </ul>
        <div id="headings">
            <h1 id="nameHeader">title</h1>
            <br>
            <h2 id="typeItH2"></h2>
        </div>
        <a id="readCv" href="#readCvJump">Read CV</a>
    </nav>
</header>

<div id="mainContent">
    <h3>CV</h3>
    <div class="cvSection">
        <h4 id="cvSectionHeadingFirst">Academic History</h4>
        ....
        ....

然后在这里找到有效的页面的html：

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Assets/Css/MPW.css">
</head>

<body class="pageContainer">
<header>
    <div class="headerContent">
        <nav>
            <ul>
                <a class="navBarRightCurrent" href="contact.html">
                    <li>Contact</li>
                </a>
                <a class="navBarRight" href="index.html">
                    <li>Home</li>
                </a>
            </ul>
        </nav>
    </div>
</header>

<div id="contactForm">
    <h4 id="contactHeading">Contact Us</h4>
    ...
    ...

这里是CSS：

@-webkit-keyframes fadeInUp {
from {
    opacity: 0;
}
to {
    opacity: 1;
}

}

@keyframes fadeInUp {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

nav {
    width: 100%;
    padding-bottom: 15px;
}

nav li {
    display: inline;
    margin-right: 15px;
}

footer {
    background-color: rgb(44, 44, 44);
    height: 70px;
    padding: 65px 15% 40px 15%;
}

.headerContent {
    background-color: white;
    background: url(../Images/mainPhoto.jpg) no-repeat center center fixed;
    @media only screen and (min-width: 320px) and (max-width: 480px) {
        background: url(../Images/mainPhotoSmall.jpg) no-repeat center center fixed;
    }
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    padding: 40px 10% 40px 10%;
}

#readCv {
    margin-left: 44%;
    padding: 12px 23px;
    display: block;
    background-color: rgb(246, 246, 244);
    color: rgb(159, 83, 59);
    border-color: rgb(159, 83, 59);
    border: 2px solid;
    width: 70px;
    text-align: center;
}

#readCv:hover {
    border-color: rgb(54, 53, 48);
    color: rgb(54, 53, 48);
}

#headings {
    text-align: center;
    display: block;
    padding-top: 30vh;
    width: 450px;
    height: 100px;
    margin: 0 auto;
}

#nameHeader {
    animation: fadeInUp 1.3s ease-in-out;
    display: inline-block;
    margin: 0px 10px;
    background: rgba(246, 246, 244, .4);
    border-radius: 8px;
}

#mainContent {
    background-color: rgb(247, 247, 247);
    width: 100%;
    padding: 40px 15% 60px 15%;
    box-sizing: border-box;
}

.pageContainer {
    min-width: 700px;
    min-height: 100vh;
}

#contactForm {
    position: absolute;
    display: block;
    top: 120px;
    margin: 0px 25% 20px 25%;
    width: 450px;
    padding: 50px 80px;
    background-color: rgb(247, 247, 247);
    border-radius: 6px;
}

#contactHeading {
    font-size: 2em;
    font-family: 'AlgreyaSans-Regular', 'Helvetica';
    animation: fadeInUp 1.3s ease-in-out;
    -webkit-animation: fadeInUp 1.3s ease-in-out;
}

我尝试过的事情：

为移动设备加载小得多的图像。
比较两个标题以使它们尽可能相似。
从标题中取出内容以查看是否有任何内容影响了背景图片。

Answer 1

区别在于<header代码与包含的div

版本1：<header class="headerContent">

版本2：<div class="headerContent">，在此之前带有<header>标记

即。 CSS类被分配给两个不同的元素

背景图像不仅仅显示在一个移动页面上

1 个答案: