在mvc布局页面中设置背景图片

我想在MVC布局页面中设置背景图片。我已经创建了CSS。我如何在布局中设置它。不知道把它放在哪里。在mvc布局页面中设置背景图片

下面是我的CSS文件

app.css

body { 
    font-family: Helvetica, sans-serif, sans-serif; 
    font-size: 13px; 
    border-top: none; 
    background-image: url('../Images/iNeed__waterfall_BG.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
     background-color:red; 
} 



.navbar { 
    margin-bottom: 0px; 
    padding: 0; 
    background-color:white; 
} 

.navbar-header img{ 
    width: auto; 
    height: auto; 
    padding-top:15px; 
} 

nav navbar-nav navbar-right{ 
    text-align:center; 
} 

.hideli { 
    padding-right: 200px; 
}

下面是我的项目布局页面。

布局页面

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.common-bootstrap.min.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.mobile.all.min.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" /> 
    <link href="@Url.Content("~/Content/kendo/2017.1.223/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" /> 
    <link href="~/Content/bootstrap.css" rel="stylesheet" /> 
    <link href="~/Content/app.css" rel="stylesheet" /> 

    <script src="~/Scripts/jquery-3.1.1.min.js"></script> 
    <script src="~/Scripts/bootstrap.min.js"></script> 

    <script src="@Url.Content("~/Scripts/kendo/2017.1.223/jquery.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/kendo/2017.1.223/angular.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/kendo/2017.1.223/jszip.min.js")"></script> 
    <script src="@Url.Content("~/Scripts/kendo/2017.1.223/kendo.all.min.js")"></script> 

</head> 
<body > 

    <header> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <!-- Brand and toggle get grouped for better mobile display --> 
       <div class="navbar-header"> 
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a href="#"><img src="~/Images/NGSR-logo.jpg" /> </a> 
       </div> 

       <!-- Collect the nav links, forms, and other content for toggling --> 
       <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 

        <ul class="nav navbar-nav navbar-right text-center"> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Requests</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon-tasks" aria-hidden="true"></span><p>Activities</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Reports</p></a></li> 
         <li><a href="#"><span class="glyphicon glyphicon glyphicon-file" aria-hidden="true"></span><p>Admin</p></a></li> 


         <li class="dropdown hideli"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> 
           <select> 
            <option><a href="#">ALL</a></option> 
            <option><a href="#">DE</a></option> 
            <option><a href="#">GB</a></option> 
            <option><a href="#">FR</a></option> 
           </select> 
           <p>Country</p> 
          </a> 
         </li> 

         <li><a href="#"><span class="glyphicon glyphicon-save" aria-hidden="true"></span><p>Save View</p></a></li> 
        </ul> 
       </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav> 

    </header> 

    <div> 

     @*<img src="~/Images/iNeed__waterfall_BG.jpg" />*@ 
     @RenderBody() 
    </div> 
</body> 
</html>

的HomeController

public class HomeController : Controller 
    { 
     public ActionResult Index() 
     { 
      ViewBag.Message = "Welcome to ASP.NET MVC!"; 

      return View(); 
     } 
    }

的index.html

@{ 
    ViewBag.Title = "Home Page"; 
}

来源

2017-02-27 Tom

我认为你有它在正确的地方，但你需要用引号包装你的文件路径，并使用'背景'属性。

background：url（'../ Images/iNeed__waterfall_BG.jpg'）;

来源

2017-02-27 18:58:18

这就够了刚刚宣布的CSS属性。我在哪里应用布局中的背景属性 – Tom

您可能需要将'〜'更改为'..'。我在我的项目中测试，它与'..'一起工作，但不是'〜'。不知道为什么，但是。 –

它仍然剂量工作。该图片的链接是正确的。拼写的图像名称是正确的。我用双引号括起来了。我检查了开发人员工具，并且在控制台窗口中没有错误。我在想什么 – Tom

您没有将您的Main.css包含到您的HTML中。

将以下内容添加到您的HTML<head>部分。

<link rel="stylesheet" type="text/css" href="Main.css">

来源

2017-02-27 18:59:54

对不起我的错误。 Main.css不存在。该实现在app.css中。我在哪里应用背景属性 – Tom

上面的CSS是在app.css中吗？ –

是的。我是否需要将它作为布局 – Tom

我会在这里把它：

<link href="~/Content/bootstrap.css" rel="stylesheet" /> 
<link href="~/Content/app.css" rel="stylesheet" /> 
<link href="~/Content/Main.css" rel="stylesheet" /> /* <-- HERE */

来源

2017-02-27 19:07:42 Johannes

对不起我的错误。 Main.css不存在。该实现在app.css中。我在哪里应用背景属性 – Tom

在mvc布局页面中设置背景图片

回答

相关问题