Question

在正常的窗口大小中，我的网站包含标题照片，欢迎和旅行建议书写在照片上，标题栏的底部是导航栏。我希望它在手机视图中看起来一样，但每次我最小化屏幕时，书写和标题照片都会消失，导航栏会在页面顶部移动，然后是剩余的正文内容。其他一切都很好。我只是想找到一种方法来将标题照片保留在移动视图中以及它下面的导航栏。谢谢！

我的HTML代码是：

<style>
    .brand,
    .address-bar {
        text-align: center;
        background: url("img/photo.jpg") no-repeat center center fixed;
        background-size: cover;
        position: relative;
        top: -10%;
        left: -10%;
        right: -10%;
        min-width: 110%;
        min-height: -10%;
        padding: 100px;
        font-size: 50px;
        color: black;
        margin-top:-1%;
    }
    ......
    @media screen and (min-width:768px) {
        .brand {
            display: inherit;
            margin: 0;
            text-align: right;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 5em;
            font-weight: 700;
            line-height: normal;
            color: #fff;
        }

        .address-bar {
            display: inherit;
            margin: 0;
            padding: 0 150px 400px;
            text-align: right;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            text-transform: uppercase;
            font-size: 1.25em;
            font-weight: 400;
            letter-spacing: 3px;
            color: #fff;
        }
        ......
</style>
.....
<body>
    <div class="brand"> Welcome </div>
    <div class="address-bar"> Travel recommendations </div>
    <!-- Navigation -->
    <nav class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
             ...

屏幕最小化时，标题照片（导航栏上方）消失

0 个答案: