背景图像适用于我网站的所有桌面页面和移动设备页面。我想弄清楚为什么它不会只显示在我的一个移动页面上。
这是它不起作用的页面的 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;
}
我尝试过的:
- 为移动设备加载小得多的图像。
- 比较两个标题，使它们尽可能相似。
- 从标题中取出内容，看看是否有任何内容影响了背景图像。
最佳答案
区别在于 <header标签与包含的 div
版本 1:<header class="headerContent">
版本 2:<div class="headerContent"> , 与 <header>在那之前标记
即CSS 类被分配给两个不同的元素
关于html - 背景图像不只显示在一个移动页面上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41687220/