Question

几天来我一直在研究这个问题，但我仍然无法弄清楚。我知道这可能被标记为重复项，因为它与其他一些帖子有些相似；我已经看过了，但他们仍然没有回答我的问题。

最近我一直在尝试ASP.NET MVC应用程序，并且试图在网站顶部添加英雄图像。我在Dreamweaver中成功地做到了这一点（在将网站插入VS之前，我曾用它来设计网站），但是当我将其复制到Visual Studio中时（如果有帮助，则为2017年）；它已将我的文本合并到横幅中，甚至没有显示图像。

该如何解决？我到处搜索，找不到它。

（下面的我的代码）

    @{
    Layout = "~/Views/Shared/_Layout.cshtml";
 }

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body, html {
            height: 100%;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        .hero-image {
            width: 100%;
            height: 100%;
            background-image: url(images/background.png.png);
            background-size: contain;
        }

        .hero-text {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
        }

            .hero-text button {
                border: none;
                outline: 0;
                display: inline-block;
                padding: 10px 25px;
                color: black;
                background-color: #ddd;
                text-align: center;
                cursor: pointer;
            }

                .hero-text button:hover {
                    background-color: #555;
                    color: white;
                }
    </style>
</head>
<body>

    <div class="hero-image">
        <div class="hero-text">
            <h1 style="font-size:50px">TITLE</h1>
            <p>SUB TITLE</p>
            <button>BUTTON</button>
        </div>
    </div>

    <p>Page Content..</p>

</body>
</html>

它应该是这样的：

Image in Dreamweaver

这就是在ASP.NET中的样子：

In ASP

这是我的_Layout文件

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Code Club</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("title", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About", "About", "Home")</li>
                    <li>@Html.ActionLink("Challenges", "Challenges", "Home")</li>
                    <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
                </ul>
                @Html.Partial("_LoginPartial")
            </div>

        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - KHC Code Club Group</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

folder structure

文件夹结构为：

此PC> SolutionName> SolutionNAme>视图>主页。标语是我正在处理的文件。标语还包含CSS，images文件夹包含背景。

Hero Image无法在ASP.NET中出现

0 个答案: