Question

我正在为某人创建一个网站，当我放置徽标时，它下面会有一行背景颜色。这是非常令人沮丧的，它破坏了设计，所以有谁知道如何摆脱它？我需要知道一个可靠的解决方案，所以我知道将来如何做到这一点，所以虽然它可能有用但我需要一些不是疯狂的东西，我需要它有点简洁。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width = device-width, initial-scale = 1">
<title>Pressure Pros</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Abel|Kanit|Lobster" rel="stylesheet">
<script>src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> </script>
<script>
$(document).ready(function()){

});
</script>

<style>

.navbar-brand{
	font-size: 50px;
	color:white;
	font-family:'Lobster';
	height: 100%;
}

a{
	color: white;
	font-family: 'Abel';
	font-size: 30px;
}

p{
	font-family: 'Kanit';
  font-size: 20px;
}

#navbar{
  padding-top:20px;
}

#alone{
	background-image: url(/Users/adk6332/Desktop/Bootstrap/images/alone.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
}

.navbar-header{
  padding-top:20px;
  padding-left: 9px;
}

#three{
  height: 900px;
  width: 100%;
}

#box-wrapper{
  background-image: url(/Users/adk6332/Desktop/Bootstrap/images/imagethree.png);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
}

#logo{
padding:0px;
}

.middleimage{
  position: absolute;
  z-index: 1;
  top:275px;
  left: 485px;
  color: white;
  font-family:'Abel';
}

.bottomimage{
	font-size: 60px;
	position: absolute;
	z-index: 1;
	top:175px;
	left: 185px;
	color: black;
	font-family:'Abel';
}

#model{
  margin: 10px;
  width: 500px;
  height: 500px;
}

</style>
</head>
<body>

<div id="navigation">
<nav class="navbar navbar-transparent navbar-custom navbar-fixed-top" style="background-color:#407EC1;">
	<a href="#" class="navbar-left"><img src="/Users/alecklem/Desktop/project1/media/pp_logo_3.png" style="height:80px; width: 217px;" id="logo"></a>
		<div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand "href="#">Pressure </a>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    	</div>
      <div class="collapse navbar-collapse" id="navbar">
        <ul class="nav navbar-nav navbar-right text-uppercase">
					<li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
   	      <li><a href="fleet.html">Fleet Washing</a></li>
   		    <li><a href="residential.html">Residential Service</a></li>
          <li><a href="commercial.html">Commercial Service</a></li>
      </ul>
    </div>
  </nav>
</div>
  <br>
  <br>
  <br>
  <br>
<div class="jumbotron" id="box-wrapper">
  <div class="container">
    <div class="row">
     <div class="col-lg-12"></div>
        <div class="text-uppercase middleimage">
          <h1>Pressure Pros</h1>
        </div>
    </div>
  </div>
</div>
  <br>
  <br>
<div class="container">
	<p>
		Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru

</p>
</div>

<br>
<br>
<br>
<br>

<div class="jumbotron" id="alone">
	<div class="row">
		<div class="container">
			<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<div class="text-uppercase bottomimage">
				<h1> Miracle Model of the Month </h1>
			</div>
		</div>
	</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container">
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru
	</p>
</div>


<br>
<br>
<br>

</body>
</html>

enter image description here

Answer 1

将白色设置为<img>的背景，并根据需要将其设置为display: block。然后检查它是否需要高于80px的高度才能覆盖导航栏的蓝色背景。

更新

我刚刚看到navbar上有一个透明的底部边框。只需在.navbar-fixed-top类中添加一个新的CSS规则，如下所示：

.navbar-fixed-top {
    border-bottom: 0;
}

Answer 2

您可以将身高徽标设置为80px以上例如：

<a href="#" class="navbar-left"><img src="/Users/alecklem/Desktop/project1/media/pp_logo_3.png" style="height:90px; width: 217px;" id="logo"></a>

如何摆脱徽标html下的行css bootstrap

2 个答案:

更新