当屏幕最小化时，标题图片(在导航栏上方)消失。
在正常的窗口大小，我的网站包含标题照片，欢迎和旅行的建议写在照片上，在标题的底部，肚脐。我希望它在移动电话视图中看起来是一样的，但是每次我最小化屏幕和导航栏在页面顶部移动时，写入和标题照片就会消失，然后是正文内容的其余部分。其他的一切都很好。我只是想找到一种方法来保持标题照片在移动视图和导航栏在它下面。谢谢!
我的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>
...回答 3
Stack Overflow用户
发布于 2017-02-23 21:50:00
尝试使用一个灵活的框或css网格很容易，下面有一个演示的链接，我为您制作了一个缩放和响应的标题和导航栏，希望这能帮助您度过美好的一天。
有一个演示:
缩放头和导航条
当然，不要忘记在您的<head>中添加以下代码：
<meta name="viewport" content="width=device-width, initial-scale=1">Stack Overflow用户
发布于 2017-02-23 20:42:21
<meta name="viewport" content="width=device-width, initial-scale=1.0">尝试将其添加到文档的顶部。它现在应该缩放图像。您现在不应该需要css中的@mediascreen代码。
Stack Overflow用户
发布于 2017-02-23 20:52:12
从外表看，你的形象不应该消失。但有一些事情，你正在做，这可能会导致标题照片看起来像是它没有正确显示。
我想说的是，您应该在媒体查询中开始调试。也许尝试将display:block;添加到您的.brand类中，并给它设置一个设置的高度。我想这也许能解决你的一些问题。
还可以尝试在html头部添加一个viewport，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1.0">这将告诉浏览器如何控制页面的尺寸和缩放。
而且，您在.address-bar类上拥有的.address-bar是无用的，这不会做任何事情。div的大小不能小于0。
但是，如果您说它可以全屏工作，请尝试删除整个媒体查询，看看是否仍然得到了不想要的结果。如果没有，那就有你的地方可以开始了。
https://stackoverflow.com/questions/42425379
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号