html - 如何通过css在mvc中为 anchor 标签设置图像？

Question

我有以下 cshtml 并且工作正常:

var calcButtonStyle = "font-size:smaller;font-weight:normal;position:absolute; width: " + string.Concat(@control.Width / 5, "px") + ";height:" + string.Concat(@control.Height / 5, "px") + ";left:" + string.Concat(@control.LeftLocation + @control.Width + 10, "px") + ";top:" + string.Concat(@control.TopLocation, "px") + " ";
<a href="#" onclick="CalculateExpression('@control.OptionList', '@control.FieldName')" style="@calcButtonStyle"><img src="~/Content/Images/_Summation.svg" /></a>

现在，我想要的是将要从 CSS 呈现的样式(高度、宽度和特别是图像)与其余部分分开。为此，这是我的 css:

#test-compute {
  font-size:smaller;
  font-weight:normal;
  position:absolute;
  height: 20px;
  width: 20px;
  background: url('Images/_Summation.svg');
}

在 cshtml 中，我这样写:

var calcButtonStyle = "left:" + string.Concat(@control.LeftLocation + @control.Width + 10, "px") + ";top:" + string.Concat(@control.TopLocation, "px") + " ";
<a href="#" onclick="CalculateExpression('@control.OptionList', '@control.FieldName')" style="@calcButtonStyle" class="test-compute"></a>

但是图像没有渲染，知道我遗漏了什么地方吗？

提前致谢。

Answer 1

您访问的 DOM 元素不正确，您是通过 id 访问 #test-compute 应该是 .test-compute 才能按类访问。