Question

所以我在visual studio上开发了一个网站，设置了css和master页面，并显示链接和内容如下：

所以我希望一个jumbotron在链接上方显示为标题/标题，并与页面的其余部分对齐。

我的css：

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, textarea, p, block, ul, li {
padding: 0;
margin: 0;
}
/*body*/
body
{
background-color: rb(237, 237,2367);
font-family: Century Gothic;
Font-size: 14px; 
}

.clear
{
clear: both;
}

/*page*/
.wrapper
{
width:950px;
margin:auto;
}

/*Homepage*/
.content
{
width:100%;
background-colour: rgb(254,254,254);
border: 1px solid rgb(224,224,224);
border-radius:5px 5px 5px 5px;
float: left;
margin-top: 8px;
margin-bottom: 8px;
min-height:400px;

}

/*Menu*/
.menu {
background-color: rgb(10, 110, 178);
width: 100%;
margin: 0px 0px 10px;
padding: 0px;
height: 40px;
color: rgb(243, 243, 243);
border-radius: 5px 5px 5px 5px;
}

.navigation_first_item {
border-left: 0px;
border-radius: 5px 0 05px;
}
.navitem_s{
float: left;
border-right:1px solid rgb(10, 85, 125);
border-left: 1px solid rb(7, 153, 200);
height:40px;
background-color:rgb(14,79,114);
}
.menu ul{

}
.menu ul li{
float:left;
display:block;
list-style:none;
border-right:1px solid rgb(10, 85,125);
border-left:1px solid rgb(67, 153, 200);
}
.menu ul li.navigation_first_item:hover
{
border-radius:5px 0px 0px 5px:;
}

.menu ul li a
{
font-size: 13px;
font-weight:bold;
line-height:40px;
padding:8px 20px;
color:rgb(225,225,225);
}

.menu ul li:hover{
background-color:rgb(14,89,130);
border-right:1px solid rgb(14,89,130)
}
.clear
{
clear:both;
}

/*footer*/
.footer{
height:50px;
background-color: rgb(10, 110, 178);
color:rgb(255,255,255);
border-radius:5px 5px 5px 5px;
}
.footer h2
{
padding:15px;
position:center;
}

我的主页：

 <%@ Master Language="VB" CodeFile="MasterPage.master.vb"     Inherits="Masterpages_MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
    <asp:ContentPlaceHolder ID="title" runat="server">   </asp:ContentPlaceHolder>
</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>
 <link href="../Styles/StyleSheet.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">

  <div class ="menu">
    <ul>
       <li class="navigation_first_item"><a  href="Information.aspx">Information</a></li>
       <li><a href="Register.aspx">Register</a></li>
       <li><a href="Login.aspx">Login</a></li>

        <li></li>

    </ul>
   </div>
    <div class="clear"></div>
    <div class="content">

    <asp:ContentPlaceHolder id="contentbody" runat="server">

    </asp:ContentPlaceHolder>
</div>
<div class="clear"></div>
<div class="footer">
Surgery Cloud
</div>
</div>

</form>
</body>
</html>

所以从网站上的一个问题开始，我注意到一张图片可以放在一个超大屏幕里（这只是一个例子）：

  .jumbotron {
margin-bottom: 0px;
background-image: url(../img/jumbotronbackground.jpg);
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
color: white;
text-shadow: black 0.3em 0.3em 0.3em;
}

当我把

<div class="jumbotron"></div>

在头部内容部分，图片不会出现在链接上方我想要的位置。

Answer 1

您是否尝试将图片网址放在引号中？

background-image: url("../img/jumbotronbackground.jpg");

我想在我的母版页中放置一个jumbotron作为标题

1 个答案: