Question

如何在图片上添加文字？我总是得到文字贝娄图像？是否有任何风格，以便标题和描述符覆盖图像而不是下方？

  <div class="row">
        @foreach (var banner in Model.SportBanners)
        {

       <a href="@banner.LinkTo">
       <img id="resize" src="@banner.BannerPath" alt="" />
       <div class="@banner.ClassTag">

        </div>
        </a>
       <div class="image" style="">
        <h1>
        @MvcHtmlString.Create(Html.Encode(banner.Title).Replace("-", "<br />"))
     </h1>
      <br>
    <p> @MvcHtmlString.Create(Html.Encode(banner.Description).Replace("-", "<br />"))</p>
    <br>
    <br>
    </div>
    }
    </div>

Answer 1

您可以使用定位。

设置包含元素的position: relative。

将要控制的任何内部元素的position: absolute设置为超出默认行为。然后，top，right，bottom和left将允许您将此元素放置在包含div中的任何位置。

这将帮助您根据HTML使用img标签定位内容（允许CMS驱动等），而不是将它们设置为背景图像，这将需要详细的类或内联样式标记。 / p>

请参阅http://jsfiddle.net/5nryk3L6/2/以获取实现此目的的代码的简化版本（删除CMS后端内容）。我在容器上添加了一个margin-left来演示位置绝对值是如何相对于位置相对设置的DOM树上的下一个元素，因为这可能非常令人困惑

如何在图像上设置文字？

1 个答案: