个人中心
gpt4 book ai didi

html - 背景图像不只显示在一个移动页面上

转载 作者：太空宇宙 更新时间：2023-11-04 13:05:58 25 4
gpt4 key购买 nike

背景图像适用于我网站的所有桌面页面和移动设备页面。我想弄清楚为什么它不会只显示在我的一个移动页面上。

这是它不起作用的页面的 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/

25 4 0
文章推荐： javascript - 禁用 JS 时隐藏内容的样式
文章推荐： c++ - 解决由于类之间的循环依赖而导致的构建错误
文章推荐： javascript - snapscroll 插件未激活
文章推荐： javascript - 在 anchor 标记中嵌套可点击组件
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com