如何显示类似gmail显示器的图像? [英] How to display image like gmail displays?

问题描述

ASP.NET Core应用程序.

ASP.NET Core app.

如果用户已登录，我会看到:

If user is signed in I see:

你好@ UserManager.GetUserName(User)！

Hello @UserManager.GetUserName(User)!

在页面上:

@if (SignInManager.IsSignedIn(User))
{
    <form asp-area="" asp-controller="Account" asp-action="Logout" method="post" id="logoutForm" class="navbar-right">
        <ul class="nav navbar-nav navbar-right">
            <li>
                <a asp-area="" asp-controller="Manage" asp-action="Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
            </li>
            <li>
                <button type="submit" class="btn btn-link navbar-btn navbar-link">Log out</button>
            </li>
        </ul>
    </form>
}

我想在右上角显示类似gmail的图像:用户名2个字母的缩写.如何生成和显示图像?

I want to display image like gmail displays in right-upper corner: abbreviation with 2 letters of username. How to generate and display the image?

推荐答案

您不需要生成图像，可以完全使用HTML和CSS来完成此操作.例如:

You don't need to generate an image, you can do this completely with HTML and CSS. For example:

.username-wrapper {
  display: table;
  width: 40px;
  height: 40px;
  overflow: hidden;
}

.username {
  display: table-cell;
  vertical-align: middle;
  background-color: red;
  border-radius: 20px;
  text-align: center;
  color: white;
  font-family: Arial;
}

<div class="username-wrapper">
  <div class="username">
    DG
  </div>
</div>

这篇关于如何显示类似gmail显示器的图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！