header.myheader{
height: 600px;
background:url("http://imgur.com/HAst0aY")!important;
}
nav.mynavbar,a:hoover {
float:left;
display: inline-block;
margin-left: 20px;
font-weight: 200;
color:rgba(255,255,255,0.7);
font-size: 20px;
text-transform: capitalize;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class ="myheader">
<nav class ="mynavbar">
<a href="#" class = "homepage"> MSMAlliance Group</a>
<a href="#" class = "About" > About </a>
<a href="#" class = "Meetus">Meet Us</a>
<a href="#" class ="events"> Event </a>
<a href ="#" class = "contactus"> Contact Us</a>
<a href="" target="_blank" > Excutive Log In / Sign Up </a>
</nav>
<h1> Welcome to Morehouse School of Medience - Alliance Group </h1>
</header>我在使用 imgur 作为图像位置显示背景图像时遇到问题。我已经尝试添加一个类来覆盖 Bootstrap 并且我已经尝试了!important，但它仍然无法正常工作。有趣的是，当我只使用背景:黑色时，颜色会出现，但是当我尝试放置图像时它不起作用。
下面是我的代码。 PS - 我是新手。
CSS Code:
header.myheader{
height: 600px;
background:url("http://imgur.com/HAst0aY")!important;
}
nav.mynavbar,a:hoover {
float:left;
display: inline-block;
margin-left: 20px;
font-weight: 200;
color:rgba(255,255,255,0.7);
font-size: 20px;
text-transform: capitalize;
}
html code:
<!DOCTYPE html>
<html=lang ="en-US" >
<head>
<meta charset="utf-8">
<title> MSMAlliance</title>
<!-- SEO -->
<meta name = "author" content="msmalliance">
<meta name="description" content="">
<link rel="canonical" href="">
<meta name="viewport" content=" width = device-width,inital-scale = 1.0">
<link rel ="stylesheet" href="css/bootstrap.css">
<link rel ="stylesheet" href="css/bootstrap-theme.css">
<link rel ="stylesheet" href="css/customheader.css">
<link rel = "icon" href="#" type="image/x-icon" sizes=" 16x16">
<link href="https://fonts.googleapis.com/cssfamily=Open+Sans:400,600i,700i" rel="stylesheet">
<body>
<header class ="myheader">
<nav class ="mynavbar">
<a href="#" class = "homepage"> MSMAlliance Group</a>
<a href="#" class = "About" > About </a>
<a href="#" class = "Meetus">Meet Us</a>
<a href="#" class ="events"> Event </a>
<a href ="#" class = "contactus"> Contact Us</a>
<a href="" target="_blank" > Excutive Log In / Sign Up </a>
</nav>
<h1> Welcome to Morehouse School of Medience - Alliance Group </h1>
</header>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
<script src = "js/bootstrap.min.js"> </script>
<script src="js/bootstrap.js"> </script>
最佳答案
你正试图将 html 页面作为背景，但这是行不通的
而不是尝试放置真实图像
header.myheader{
height: 600px;
background:url("http://i.imgur.com/HAst0aY.jpg");
}
关于html - Bootstrap-Image 不显示使用自定义 css，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40859069/