Question

我正试图让我的博客上传，但我仍然坚持这个问题。我试图在顶部设置一个带有星空设计的标题，然后在它下面放一个小导航栏，但每当我调整页面大小时，标题图像就会在页面上显示，并且下面的导航栏会与它断开连接。如何将导航栏附加到标题，以便在调整大小时，它们是连接的而不是分开的？这是我的代码

body {
  background-color: #D3D3D3;
    margin: 0 0 100px;
   font-family: "PT-Sans", sans-serif;
}
.header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 25%;
  background-image: url("./img/header-img.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.topnav {
    background-color: #333;
    overflow: hidden;
    position: relative;
    top: 0;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.item-right {
}

<html>
    <title>Political Blog</title>
    <link rel="stylesheet" type="text/css" href="/blog/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/blog/style.css">
    <head>
    
    </head>
    <body>
    <div class="header">
    
    </div>
    <div class="topnav">
      <a href="/">Home</a>
      <a href="./latest">Latest</a>
      <a href="./all">All</a>
      <a href="./about">About</a>
    </div>
    </body>
<hr>

Answer 1

在标题中使用此css属性并在css中使用cover而不是100％并定位它。

background-size:cover; 
background-position:top center;

Answer 2

Here is the working demo in code pen:

.header {
  position: relative;
  width: 100%;
  min-height: 100px;
  background-image:url("http://lorempixel.com/1200/100/sports");
  background-repeat: no-repeat;
  background-size: cover;
  background-color:#ff0000;
}

Answer 3

您需要使用<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
来在<head>标记

中制作响应式页面

＆＃13;

body {
  background-color: #D3D3D3;
    margin: 0 0 100px;
   font-family: "PT-Sans", sans-serif;
}
.header {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 25%;
  background-image: url("./img/header-img.png");
  background-repeat: no-repeat;
  background-size: 100%;
}
.topnav {
    background-color: #333;
    overflow: hidden;
    position: relative;
    top: 0;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.item-right {
}

＆＃13;

<html>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Political Blog</title>
<link rel="stylesheet" type="text/css" href="/blog/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/blog/style.css">
<head>

</head>
<body>
<div class="header">

</div>
<div class="topnav">
  <a href="/">Home</a>
  <a href="./latest">Latest</a>
  <a href="./all">All</a>
  <a href="./about">About</a>
</div>
</body>
</html>

＆＃13;

Answer 4

以下是工作演示：https://jsfiddle.net/ma5sn8c0/

＆＃13;

body {
   background-color: #D3D3D3;
   margin: 0 0 100px;
   font-family: "PT-Sans", sans-serif;
}
.header {
  display: block;
  width: 100%;
  height: 200px;
  background-image: url("http://via.placeholder.com/900x150/42f4aa/ffffff");
  background-repeat: no-repeat;
  background-size: 100%;
  background-size:cover; 
  background-position: center center;
}

.topnav {
    background-color: #333;
    overflow: hidden;
    position: relative;
    top: 0;
}

.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a:hover {
    background-color: #ddd;
    color: black;
}

.topnav a.active {
    background-color: #4CAF50;
    color: white;
}
.item-right {
}

＆＃13;

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="header">
</div>
<div class="topnav">
  <a href="/">Home</a>
  <a href="./latest">Latest</a>
  <a href="./all">All</a>
  <a href="./about">About</a>
</div>

＆＃13;

Navbar下面的标题响应问题

4 个答案: