你可以试试这样的方法：

自定义图像剃刀

<div style="position: relative; cursor: pointer" @onclick="@this.Clicked">

  @* the image *@
  <MudImage Src="@this.Src" Alt="@this.Alt"/>

  @* A transparent background for the text *@
  <MudPaper
    Elevation="0"
    Class="rounded-0"
    Style="position: absolute; bottom: 0; left: 0; padding: 25px; width: 100vw; opacity: 0.6">

    @* Hack: the text is needed to give the transparent part the proper height, but will also display the text in 0.6 transparency *@
    <MudText Typo="Typo.h4">@this.Name</MudText>
    <MudText Typo="Typo.h6">@this.ShortName</MudText>
  </MudPaper>

  @* The text (in black) *@
  <span style="position: absolute; bottom: 0; left: 0; padding: 25px; width: 100vw; color: black">
    <MudText Typo="Typo.h4">@this.Name</MudText>
    <MudText Typo="Typo.h6">@this.ShortName</MudText>
  </span>

</div>

@code {

  [Parameter]
  public string Src { get; set; } = default!;

  [Parameter]
  public string Alt { get; set; } = string.Empty;

  [Parameter]
  public string Name { get; set; } = default!;

  [Parameter]
  public string ShortName { get; set; } = default!;

  [Parameter]
  public EventCallback OnClick { get; set; }

  private async Task Clicked()
  {
    await this.OnClick.InvokeAsync();
  }
}

如果这样使用：

<MudGrid>
  @foreach (var item in this.items)
  {
    <MudItem md="6">
      <CustomImage
        Src="@item.Src"
        Name="@item.Name"
        ShortName="@item.ShortName"
        OnClick="@(() => this.Click(item))"/>
    </MudItem>
  }
</MudGrid>

@code {
  private readonly List<Item> items = new()
  {
    new Item { Name = "A tasty burger", ShortName = "Some more text or a price...", Src = "images/hamburger.jpg" },
    new Item { Name = "Another burger", ShortName = "...", Src = "images/hamburger.jpg" }
  };

  private void Click(Item item)
  {
    Console.WriteLine($"Clicked {item.Name}");
  }
}

结果将是：

注意关于黑客攻击的评论：我的CSS知识是相当有限的，但我相信你的一些同事可以帮助这一点。这只是一个快速演示，让你开始。