例如，如何在 MVC 3 中的图像中包含标签？答案

【问题标题】：How to include,for example, a label into an image in MVC 3?例如，如何在 MVC 3 中的图像中包含标签？
【发布时间】：2012-08-02 19:19:18
【问题描述】：

我正在尝试在图像中插入一个标签，以创建一个允许用户咨询可用网球场的界面。

我有一个日期选择器，当我选择一个日期时，我想在这个日期用绿色显示可用的网球场，用红色显示繁忙的网球场。

那么，是否可以在图像中插入标签？怎么样？

谢谢

代码：

<div class="AvailableCourt">
    <a href="@Url.Action("Index")" target="_blank" >
        <img src="@Url.Content("~/Content/img/TennisClub.png")" title="click to view in a new window or tab" />
    </a>

【问题讨论】：

你应该添加一个像<div>这样的新项目并提供一些css类。将图像设置为该类的背景。

标签： c# html css asp.net-mvc-3

【解决方案1】：

这是我用标签覆盖图像的方法（在半透明背景上以提高易读性）。

<html>
    <head>
    <style>
        .image-wrapper{
         float:left;
         position: relative;
        }
        .image-description{
         position:absolute;
         top:10px;
         left:10px;
         background-color:black;
         color: white;
         font-size: 14px;
         font-weight: bold;
         padding: 4px 10px 4px 10px;
         opacity: 0.5;
         filter:alpha(opacity=50); /*IE fix*/
        }
    </style>    
    </head>
    <body>
        <div class="image-wrapper">
         <img src="image.png" alt="example"/>
         <div class="image-description">Example description</div>
        </div>
    </body>
</html>

【讨论】：