无法在 ASP.Net MVC 页面中的图像上显示文本

Cannot display text on image in ASP.Net MVC page

我无法在图片上写任何文字。我昨天一整天都在努力。 这似乎适用于其他 HTML 工具,如 Plain HTML,因为代码是从 w3schools 站点 here 获取的,但在 Visual Studio ASP.Net MVC 中它不起作用工作。

文字显示在图片底部,而不是图片上。

<html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>@ViewBag.Title - My ASP.NET Application</title>
            @Styles.Render("~/Content/css")
            @Scripts.Render("~/bundles/modernizr")
        </head>
        <body>
            <div class="container1">
                <img src="~/Content/images/headerBackground.jpg" alt="Snow" style="width:100%;">
                <div class="bottom-left1">Bottom Left</div>
                <div class="top-left1">Top Left</div>
            </div>
        </body>
    </html>

CSS代码

.container1 {
    position: relative;
    text-align: center;
    color: black;    
}


.bottom-left1 {
    position: absolute;        
    left: 16px;
}

尝试添加:

  bottom: 10px;

里面.bottom-left1