Question

我想在没有图像的情况下显示文本

所以我有这个CSS：


.msgdownload {
  position: relative;
  width: 25px;
  height: 25px;
  display: block;
}

.msgdownload::after {
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100% ;
background: url('') no-repeat bottom;
}

.msgdownload > p {
  position: relative;
  z-index: -1;
}

，这是HTML。来自C＃：

    return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" alt=\"Download\"  class=\"msgdownload\"></a>";

但是当图像不可用时，只显示文本即可：下载。

谢谢

您将看到文字

这是可用的图标：

background: url('./images/downloadIcon.jpg') no-repeat bottom;

如何更改此设置

   return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" alt=\"Download\"  class=\"msgdownload\"></a>";

但是，如果我这样做：

      return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" alt=\"Download\"  class=\"msgdownload\"><img src=\"#\" alt=\"download\" /></a>";

该图像也可用。然后您将看到文本和图标。

Answer 1

首先，除了 img 外，您不能为 a 标记使用替代文本。也许是这让您陷入困境。

<img src="..." alt="Text Here" />

希望对您有帮助。

Answer 2

我这样解决：

return $"<a href = \"{baseUrl}api/Devices/GetDownload/{model.AttachmentKey}/\" class=\"msgdownload\"><img src='./images/downloadIcon.jpg' alt=\"Download\"/></a>";

并对此进行了更改：

.msgdownload::after {
content:'';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100% ;
}

当图像不可用时仅显示文本

2 个答案: