在正常的窗口大小下，我的网站包含标题照片，照片上写着欢迎和旅行推荐，以及标题底部的导航栏。我希望它在手机 View 中看起来一样，但每次我最小化屏幕并且导航栏移动到页面顶部，然后是其余正文内容时，文字和标题照片都会消失。其他一切都很好。我只是想找到一种方法来将标题照片保留在移动 View 中，并在其下方保留导航栏。谢谢!
我的 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>
...
最佳答案
尝试使用 flex-box 或 css 网格很简单，下面有一个演示链接，我为您制作了一个可缩放且响应迅速的标题和导航栏，希望这能帮助您度过愉快的一天。
有演示:
当然不要忘记添加到您的<head>这段代码:
<meta name="viewport" content="width=device-width, initial-scale=1">
关于html - 屏幕最小化时标题照片(导航栏上方)消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42425379/