如何使用 MVC 方法在图像上显示文本

Question

我是 mvc5 的新手，我处于必须在图像上显示标签的情况（不在内部，如果可能的话，请告诉我这样做的方法）。

我的标签包含文本，我想在该图像上显示该文本。请看下面（我的尝试）：

<li class="odd">
    <a class="dropdown-toggle" id="btn_dashboard" onclick="return BackToHome();">
        <span><label class="LabelCSSTop">@DateTime.Now.Day  </label>  </span> //This is my text which dislay above the image (not on the image, I also want to increase its defaut size)
        <span class="head-icon head-dashboard" style="margin-top: -15px;"></span> //This displays the image below the text displayed in line above.
    </a>
</li>

是的，当然它会在文本下方显示图像（我的意思是 DateTime.Now.Day），因为编写的代码会这样做。但是有什么办法可以让我把文字放在图像的中心吗？（尺寸大于默认尺寸）

Answer 1

所以假设我们在同一页面上，您可以 div 包含您的内容：

<div class="divination"> 
   <span><label class="LabelCSSTop">@DateTime.Now.Day  </label>  </span>
</div>

然后在你的 CSS 中有一个 divination class:

.divination{
  height: 50px; // height of div
  display: table-cell; // makes the div behave like a table cell for text content
  vertical-align: middle; // vertically aligns the text content not the image
  background-image: url(../images/divbg.png) // sets the background image. Note: path  is relative to the css file
}

您需要确保 LabelCSSTop class 不会覆盖 div 的内容设置。

如何使用 MVC 方法在图像上显示文本

How to display text on image using MVC approach

css

asp.net

asp.net-mvc

razor

asp.net-mvc-5