Question

我希望我的横幅图像有点下降，以便可以看到主题的全部头部。正如您在桌面版中看到的那样，主题的头部是完全可见的，但在网站的移动版本中，我看不到完整的头部，也看不到完整的图片。如何让图像稍微下降，以便可以看到整个图像？

的照片

html代码

 <header>
        <div class="container">
            <div class="intro-text">
                <div class="intro-lead-in"  style="font-family: 'Satisfy', cursive;">Welcome To ************</div>
                <div class="intro-heading">The path you won't turn your back on</div>
                <a href="#about" class="page-scroll btn btn-xl">About Us</a>
            </div>
        </div>
    </header>

css代码

header{
    background-image:url(../img/bg.jpg);
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    -o-background-size:cover;
    text-align:right;
    color:black;
}
header .intro-text{
    padding-top:100px;
    padding-bottom:50px;

}
header .intro-text .intro-lead-in{
    font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:40px;
    line-height:22px;
    margin-bottom:20px;
    text-align: right;
}
header .intro-text .intro-heading{
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight:800;
    font-size:25px;
    line-height:50px;
    margin-bottom:50px;
    text-align:right;
    color: red;
}
@media (min-width:768px){
    header .intro-text{
        padding-top:350px;
        padding-bottom:200px;
    }
    header .intro-text .intro-lead-in{
        font-family:"Satisfy","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size:40px;
        line-height:40px;
        margin-bottom:25px;
        text-align:right;
    }
    header .intro-text .intro-heading{
        font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight:800;
        font-size:25px;
        line-height:75px;
        margin-bottom:30px;
        text-align: right;
        color: red;

    }
}

@media only screen and (max-width: 480px) {
    header .intro-text{
    padding-top:140px;
        padding-bottom:100px;
        padding-left: 110px;
    }
    header .intro-text .intro-lead-in{
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style: italic;
        font-size:26px;
        line-height:22px;
        margin-bottom:20px
    }
    header .intro-text .intro-heading{
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;

        font-weight:400;
        font-size:17px;
        line-height:18px;
        margin-bottom:30px;
        color: red;
    }
}

Answer 1

也许是这样的？

@media only screen and (max-width: 480px) {
   body {
      padding-top: 50px; // or your navbar height
   }
}

它会将您的内容在移动设备上移动50px。

Answer 2

我认为可以解决这个问题的一件事就是删除属性“background-position：center center;”从主要的，并把它的内部媒体查询为每个页面大小（移动，桌面）更改attr背景位置的第二个值，将保留这样的样本：

header{
    background-image:url('back.jpg');
    background-repeat:no-repeat;
    background-attachment:scroll;
    background-position:center center;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    -o-background-size:cover;
    text-align:right;
    color:black;
}

@media (min-width:768px){
    background-position:center 40px !important;
}


@media (min-width:480px){
    background-position:center 20px !important;
}

对不起我的英文，我希望这可以帮到你

Answer 3

您可以更改移动设备中的背景位置。

@media screen and (max-width: 480px) {
    header {
        background-position: 0px 100px;//0px from left 100px from top
    }
}

编辑：或者您可以将特定图片用于具有良好尺寸的移动设备

如何在移动网站中制作横幅图片

3 个答案: